@charset "UTF-8";/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

@font-face {
    font-family: numFont;
    src: url(//vfiles.gtimg.cn/tvideo/new_channel/assets/vNum.955fb858.ttf) format("truetype");
    font-display: swap
}

@font-face {
    font-family: OswaldRegular;
    src: url(https://vfiles.gtimg.cn/vupload/201910/c9ea771571908935508.ttf)
}

@media screen and (max-width: 1024px) {
    .large-focus.focus-wrap[data-v-2d5ee0dd] {
        height:576px;
        width: 1024px
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .large-focus.focus-wrap[data-v-2d5ee0dd] {
        height:720px;
        width: 100%
    }
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {
    .large-focus.focus-wrap[data-v-2d5ee0dd] {
        width:100%;
        height: 44.4444444444vw
    }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
    .large-focus.focus-wrap[data-v-2d5ee0dd] {
        width:100%;
        height: 44.4444444444vw
    }
}

@media screen and (min-width: 1920px) {
    .large-focus.focus-wrap[data-v-2d5ee0dd] {
        height:800px;
        width: 100%
    }
}

@media screen and (max-width: 1024px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        height:576px;
        width: 1024px
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        height:720px;
        width: 100vw
    }
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        width:100vw;
        height: 56.25vw
    }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        width:100vw;
        height: 56.25vw;
        top: 50%;
        transform: translateY(-50%)
    }
}

@media screen and (min-width: 1920px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        width:1920px;
        height: 1280px;
        top: 50%;
        left: 50%;
        transform: translate(-50%) translateY(-50%)
    }
}

@media screen and (min-width: 1920px) and (min-width: 2190px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        left:calc(270px + (100vw - 270px)/2)
    }
}

@media screen and (min-width: 1920px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd]:before {
        content:"";
        width: 400px;
        height: 100%;
        background-image: linear-gradient(270deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.6) 50%,#141414 100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12
    }
}

@media screen and (min-width: 1920px) {
    .large-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd]:after {
        content:"";
        width: 400px;
        height: 100%;
        background-image: linear-gradient(90deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.6) 63%,#141414 100%);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 12
    }
}

@keyframes info-wrap-ani-2d5ee0dd {
    to {
        bottom: 40px
    }
}

@keyframes title-logo-ani-2d5ee0dd {
    to {
        transform: scale(.75)
    }
}

.large-focus.focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
    bottom: calc(40% - 100px);
    animation-name: info-wrap-ani-2d5ee0dd;
    animation-duration: .5s;
    animation-direction: alternate;
    animation-delay: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.large-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
    transform-origin: left bottom;
    animation-name: title-logo-ani-2d5ee0dd;
    animation-duration: .5s;
    animation-direction: alternate;
    animation-delay: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.large-focus.focus-wrap .content .info-wrap .video-logo-wrap[data-v-2d5ee0dd] {
    position: relative;
    transform-origin: left bottom;
    animation-name: title-logo-ani-2d5ee0dd;
    animation-duration: .5s;
    animation-direction: alternate;
    animation-delay: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.large-focus.focus-wrap .content .info-wrap .video-logo-wrap .video-logo[data-v-2d5ee0dd] {
    position: absolute;
    left: 3%;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 25px
}

@media screen and (max-width: 1600px) {
    .large-focus.focus-wrap .content .info-wrap .video-logo-wrap[data-v-2d5ee0dd] {
        width:240px;
        height: 160px
    }

    .large-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
        font-size: 54px
    }
}

@media screen and (min-width: 1600px) {
    .large-focus.focus-wrap .content .info-wrap .video-logo-wrap[data-v-2d5ee0dd] {
        width:300px;
        height: 200px
    }

    .large-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
        font-size: 72px
    }
}

@media screen and (max-width: 1280px) {
    .large-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 3 * var(--card-margin)) / 4 * 129 / 92)
    }
}

@media screen and (max-width: 1280px) and (max-width: 1024px) {
    .large-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        min-height:110px
    }
}

@media screen and (max-width: 1600px) and (min-width: 1281px) {
    .large-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 4 * var(--card-margin)) / 5 * 129 / 92)
    }
}

@media screen and (min-width: 1601px) {
    .large-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 5 * var(--card-margin)) / 6 * 129 / 92);
        max-height: 134px
    }
}

@media screen and (max-width: 1024px) {
    .medium-focus.focus-wrap[data-v-2d5ee0dd] {
        height:384px;
        width: 1024px
    }
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
    .medium-focus.focus-wrap[data-v-2d5ee0dd] {
        height:37.5vw;
        width: 100%
    }
}

@media screen and (min-width: 1601px) {
    .medium-focus.focus-wrap[data-v-2d5ee0dd] {
        height:600px;
        width: 100%
    }
}

@media screen and (max-width: 1024px) {
    .medium-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        width:1024px;
        height: 576px;
        position: absolute;
        top: calc(50% + 2vw);
        left: 50%;
        transform: translate(-50%,-50%)
    }
}

@media screen and (min-width: 1025px) and (max-width: 1920px) {
    .medium-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        width:100vw;
        height: 56.25vw;
        position: absolute;
        top: calc(50% + 2vw);
        left: 50%;
        transform: translate(-50%,-50%)
    }
}

@media screen and (min-width: 1920px) {
    .medium-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        width:1920px;
        height: 1080px;
        position: absolute;
        top: calc(50% + 2vw);
        left: 50%;
        transform: translate(-50%,-50%)
    }
}

@media screen and (min-width: 1920px) and (min-width: 2190px) {
    .medium-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
        left:calc(270px + (100vw - 270px)/2)
    }
}

@media screen and (min-width: 1920px) {
    .medium-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd]:before {
        content:"";
        width: 400px;
        height: 100%;
        background-image: linear-gradient(270deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.6) 50%,#141414 100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12
    }
}

@media screen and (min-width: 1920px) {
    .medium-focus.focus-wrap .content .player-wrap[data-v-2d5ee0dd]:after {
        content:"";
        width: 400px;
        height: 100%;
        background-image: linear-gradient(90deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.6) 63%,#141414 100%);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 12
    }
}

.medium-focus.focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
    bottom: 40px;
    animation-name: info-wrap-ani-2d5ee0dd;
    animation-duration: .5s;
    animation-direction: alternate;
    animation-delay: 5s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.medium-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
    transform-origin: left bottom
}

.medium-focus.focus-wrap .content .info-wrap .label[data-v-2d5ee0dd] {
    margin-top: 10px
}

.medium-focus.focus-wrap .content .info-wrap .video-logo-wrap[data-v-2d5ee0dd] {
    position: relative;
    transform-origin: left bottom;
    transform: scale(.75)
}

.medium-focus.focus-wrap .content .info-wrap .video-logo-wrap .video-logo[data-v-2d5ee0dd] {
    position: absolute;
    left: 3%;
    bottom: 0;
    max-width: 100%;
    max-height: 100%
}

@media screen and (max-width: 1600px) {
    .medium-focus.focus-wrap .content .info-wrap .video-logo-wrap[data-v-2d5ee0dd] {
        width:240px;
        height: 160px
    }

    .medium-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
        font-size: 40px
    }
}

@media screen and (min-width: 1600px) {
    .medium-focus.focus-wrap .content .info-wrap .video-logo-wrap[data-v-2d5ee0dd] {
        width:300px;
        height: 200px
    }

    .medium-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
        font-size: 54px
    }
}

@media screen and (max-width: 1280px) {
    .medium-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 3 * var(--card-margin)) / 4 * 52 / 92)
    }
}

@media screen and (max-width: 1280px) and (max-width: 1024px) {
    .medium-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        min-height:44px
    }
}

@media screen and (max-width: 1600px) and (min-width: 1281px) {
    .medium-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 4 * var(--card-margin)) / 5 * 52 / 92)
    }
}

@media screen and (min-width: 1601px) {
    .medium-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 5 * var(--card-margin)) / 6 * 52 / 92);
        max-height: 54px
    }
}

.medium-focus.focus-wrap .focus-list .focus-item .poster.creative-poster .pic[data-v-2d5ee0dd] {
    width: unset;
    height: 100%
}

.small-focus.focus-wrap[data-v-2d5ee0dd] {
    margin-top: 85px;
    border-radius: 16px;
    transform: rotate(0);
    overflow: hidden;
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    margin-right: 40px;
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap))
}

.small-focus.focus-wrap .left-mask[data-v-2d5ee0dd] {
    display: none
}

.small-focus.focus-wrap .bottom-mask[data-v-2d5ee0dd] {
    height: 120px
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .small-focus.focus-wrap[data-v-2d5ee0dd] {
        margin-right:60px;
        width: calc(100vw - var(--left-tab-width) - var(--tab-content-gap) - var(--content-right-margin-max) - var(--right-arrow-width))
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .small-focus.focus-wrap[data-v-2d5ee0dd] {
        margin-right:calc(40px + (100vw - 1600px)/16);
        width: calc(100vw - var(--left-tab-width) - var(--tab-content-gap) - var(--content-right-margin-active) - var(--right-arrow-width))
    }
}

@media screen and (min-width: 2161px) {
    .small-focus.focus-wrap[data-v-2d5ee0dd] {
        margin-left:calc(var(--left-tab-width) + (100vw - var(--left-tab-width) - 1797px - var(--content-big-card-margin) * 2) / 2 - 15px);
        width: calc(1797px + var(--content-big-card-margin) * 2)
    }
}

@media screen and (min-width: 1280px) {
    .small-focus.focus-wrap[data-v-2d5ee0dd] {
        height:400px
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .small-focus.focus-wrap[data-v-2d5ee0dd] {
        height:calc((100vw - var(--left-tab-width) - var(--tab-content-gap) - 40px) * 400 / 984)
    }
}

@media screen and (max-width: 1024px) {
    .small-focus.focus-wrap[data-v-2d5ee0dd] {
        height:calc((1024px - var(--left-tab-width) - var(--tab-content-gap) - 40px) * 400 / 984)
    }
}

@media screen and (max-width: 1600px) {
    .small-focus.focus-wrap[data-v-2d5ee0dd] {
        width:calc(100vw - var(--left-tab-width) - var(--tab-content-gap) - var(--content-right-margin) - var(--right-arrow-width))
    }
}

.small-focus.focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
    bottom: 0px;
    left: 24px
}

.small-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
    transform-origin: left bottom;
    font-size: 28px
}

@media screen and (max-width: 1280px) {
    .small-focus.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
        font-size:16px
    }
}

.small-focus.focus-wrap .content .info-wrap .rec-reason .quotation-marks[data-v-2d5ee0dd],.small-focus.focus-wrap .content .info-wrap .bottom[data-v-2d5ee0dd] {
    display: none
}

.small-focus.focus-wrap .content .focus-img[data-v-2d5ee0dd] {
    max-width: 1300px
}

.small-focus.focus-wrap .content .small-focus-left-mask[data-v-2d5ee0dd] {
    position: absolute;
    display: none;
    left: 0;
    height: 100%;
    min-width: 200px;
    width: calc(100% - 1300px);
    max-width: 480px;
    z-index: 11
}

.small-focus.focus-wrap .content .small-focus-right-mask[data-v-2d5ee0dd] {
    position: absolute;
    display: none;
    right: 0;
    height: 100%;
    min-width: 200px;
    width: calc(100% - 1300px);
    max-width: 450px;
    z-index: 11
}

@media screen and (min-width: 1600px) {
    .small-focus.focus-wrap .content .small-focus-left-mask[data-v-2d5ee0dd],.small-focus.focus-wrap .content .small-focus-right-mask[data-v-2d5ee0dd] {
        display:block
    }
}

.small-focus.focus-wrap .content .close-creative[data-v-2d5ee0dd] {
    top: 20px;
    right: 20px
}

.small-focus.focus-wrap .focus-list[data-v-2d5ee0dd] {
    bottom: 10px;
    right: 40px
}

.small-focus.focus-wrap .focus-list .focus-item.active .poster .process-wrap[data-v-2d5ee0dd] {
    display: none
}

@media screen and (max-width: 1280px) {
    .small-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 3 * var(--card-margin)) / 4 * 52 / 92)
    }
}

@media screen and (max-width: 1280px) and (max-width: 1024px) {
    .small-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        min-height:44px
    }
}

@media screen and (max-width: 1600px) and (min-width: 1281px) {
    .small-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 4 * var(--card-margin)) / 5 * 52 / 92)
    }
}

@media screen and (min-width: 1601px) {
    .small-focus.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
        height:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 5 * var(--card-margin)) / 6 * 52 / 92);
        max-height: 54px
    }
}

.small-focus.focus-wrap .focus-list .focus-item .poster.creative-poster .pic[data-v-2d5ee0dd] {
    width: unset;
    height: 100%
}

.small-focus.focus-wrap .focus-list .turn-page-right[data-v-2d5ee0dd] {
    right: -30px
}

.small-focus.focus-wrap .focus-list .turn-page-left[data-v-2d5ee0dd] {
    left: -40px
}

.focus-wrap[data-v-2d5ee0dd] {
    background: rgb(20,20,20);
    position: relative
}

.focus-wrap .focus-mask[data-v-2d5ee0dd] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(20,20,20,.1);
    left: 0;
    top: 0;
    z-index: 11
}

.focus-wrap .bottom-mask[data-v-2d5ee0dd] {
    height: 260px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: .97%;
    background-image: linear-gradient(180deg,rgba(0,0,0,0),#141414);
    z-index: 13
}

.focus-wrap .left-mask[data-v-2d5ee0dd] {
    height: 100%;
    width: 800px;
    z-index: 11;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(269deg,rgba(20,20,20,0) 1%,rgba(20,20,20,.6) 100%)
}

.focus-wrap .left-cover-mask[data-v-2d5ee0dd] {
    height: 98%;
    width: calc((100vw - 2160px) / 2 + 2 * var(--left-tab-width));
    z-index: 11;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 12
}

@media screen and (max-width: 2159px) {
    .focus-wrap .left-cover-mask[data-v-2d5ee0dd] {
        display:none
    }
}

.focus-wrap .right-cover-mask[data-v-2d5ee0dd] {
    height: 98%;
    width: calc((100vw - 2160px) / 2 + 1.5 * var(--left-tab-width));
    z-index: 11;
    position: absolute;
    right: 0;
    top: 0
}

@media screen and (max-width: 2159px) {
    .focus-wrap .right-cover-mask[data-v-2d5ee0dd] {
        display:none
    }
}

.focus-wrap .focus-mask-fade-enter-active[data-v-2d5ee0dd],.focus-wrap .focus-mask-fade-leave-active[data-v-2d5ee0dd] {
    transition: opacity .4s
}

.focus-wrap .focus-mask-fade-enter-from[data-v-2d5ee0dd],.focus-wrap .focus-mask-fade-leave-to[data-v-2d5ee0dd] {
    opacity: 0
}

.focus-wrap .content[data-v-2d5ee0dd] {
    width: 100%;
    height: 98.8%;
    position: relative;
    overflow: hidden
}

.focus-wrap .content .player-wrap[data-v-2d5ee0dd] {
    position: absolute;
    left: 0;
    top: 0
}

.focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
    position: absolute;
    left: calc(var(--left-tab-width) + 22px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 14
}

@media screen and (max-width: 1350px) {
    .focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
        width:400px
    }
}

@media screen and (min-width: 1351px) and (max-width: 1920px) {
    .focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
        width:calc(50vw - .5 * var(--left-tab-width) - 58px)
    }
}

@media screen and (min-width: 1921px) {
    .focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
        width:1000px
    }
}

@media screen and (min-width: 2160px) {
    .focus-wrap .content .info-wrap[data-v-2d5ee0dd] {
        left:calc(var(--left-tab-width) + (100vw - var(--left-tab-width) - 1800px - var(--content-big-card-margin) * 2) / 2 - 15px);
        width: 1150px
    }
}

.focus-wrap .content .info-wrap .title[data-v-2d5ee0dd] {
    margin-left: 2px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-weight: 700;
    cursor: pointer
}

.focus-wrap .content .info-wrap .label[data-v-2d5ee0dd],.focus-wrap .content .info-wrap .rec-reason[data-v-2d5ee0dd] {
    display: flex;
    align-items: center;
    margin-left: 6px;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    font-family: PingFangSC-Regular;
    cursor: pointer
}

.focus-wrap .content .info-wrap .label-text[data-v-2d5ee0dd],.focus-wrap .content .info-wrap .rec-reason-text[data-v-2d5ee0dd] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

@media screen and (max-width: 1024px) {
    .focus-wrap .content .info-wrap .label[data-v-2d5ee0dd],.focus-wrap .content .info-wrap .rec-reason[data-v-2d5ee0dd] {
        width:350px
    }
}

@media screen and (min-width: 1025px) and (max-width: 1240px) {
    .focus-wrap .content .info-wrap .label[data-v-2d5ee0dd],.focus-wrap .content .info-wrap .rec-reason[data-v-2d5ee0dd] {
        width:calc(100vw - 546px - var(--left-tab-width) - 100px)
    }
}

.focus-wrap .content .info-wrap .live-focus-status[data-v-2d5ee0dd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px
}

.focus-wrap .content .info-wrap .focus-rec-tag[data-v-2d5ee0dd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background-color: #ff650f;
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap
}

.focus-wrap .content .info-wrap .rec-reason[data-v-2d5ee0dd] {
    margin-top: 5px
}

.focus-wrap .content .info-wrap .bottom[data-v-2d5ee0dd] {
    display: flex;
    align-items: center;
    margin-left: 6px
}

.focus-wrap .content .info-wrap .bottom .look-positive-btn[data-v-2d5ee0dd] {
    background: rgba(255,255,255,.15);
    border-radius: 33.6px;
    display: flex;
    align-items: center;
    justify-content: center
}

.focus-wrap .content .info-wrap .bottom .look-positive-btn .icon[data-v-2d5ee0dd] {
    margin-top: 1px;
    transform: scale(.8)
}

.focus-wrap .content .info-wrap .bottom .look-positive-btn .text[data-v-2d5ee0dd] {
    font-family: PingFangSC-Regular;
    color: #fff;
    letter-spacing: 0;
    line-height: 33.6px;
    margin-left: 9px
}

.focus-wrap .content .info-wrap .bottom .look-positive-btn .link-icon[data-v-2d5ee0dd] {
    margin-top: 5px;
    margin-left: 9px;
    transform: scale(.8)
}

.focus-wrap .content .info-wrap .bottom .voice-switch[data-v-2d5ee0dd] {
    margin-left: 10px;
    cursor: pointer
}

.focus-wrap .content .info-wrap .bottom .voice-switch span[data-v-2d5ee0dd] {
    display: flex;
    align-items: center;
    padding-right: 10px;
    padding-left: 6px;
    height: 100%
}

@media screen and (max-width: 1600px) {
    .focus-wrap .content .info-wrap .bottom[data-v-2d5ee0dd] {
        margin-top:25px
    }

    .focus-wrap .content .info-wrap .bottom .look-positive-btn[data-v-2d5ee0dd] {
        width: 152px;
        height: 52px
    }

    .focus-wrap .content .info-wrap .bottom .look-positive-btn .text[data-v-2d5ee0dd] {
        font-size: 20px
    }

    .focus-wrap .content .info-wrap .bottom .voice-switch[data-v-2d5ee0dd] {
        height: 52px
    }
}

@media screen and (min-width: 1600px) {
    .focus-wrap .content .info-wrap .label[data-v-2d5ee0dd],.focus-wrap .content .info-wrap .rec-reason[data-v-2d5ee0dd] {
        font-size:16px
    }

    .focus-wrap .content .info-wrap .bottom[data-v-2d5ee0dd] {
        margin-top: 25px
    }

    .focus-wrap .content .info-wrap .bottom .look-positive-btn[data-v-2d5ee0dd] {
        width: 184px;
        height: 60px
    }

    .focus-wrap .content .info-wrap .bottom .look-positive-btn .text[data-v-2d5ee0dd] {
        font-size: 24px
    }

    .focus-wrap .content .info-wrap .bottom .voice-switch[data-v-2d5ee0dd] {
        height: 60px
    }
}

.focus-wrap .content .focus-img[data-v-2d5ee0dd] {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    max-width: 2160px;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    font-family: "object-fit: cover;";
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: content-box;
    opacity: 1
}

.focus-wrap .content .focus-fade-enter-active[data-v-2d5ee0dd],.focus-wrap .content .focus-fade-leave-active[data-v-2d5ee0dd] {
    transition: opacity .2s ease-in-out
}

.focus-wrap .content .focus-fade-enter-from[data-v-2d5ee0dd],.focus-wrap .content .focus-fade-leave-to[data-v-2d5ee0dd] {
    opacity: 0
}

.focus-wrap .content .close-creative[data-v-2d5ee0dd] {
    position: absolute;
    top: calc(var(--content-margin) + 40px);
    right: var(--content-margin);
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    background-color: rgba(0,0,0,.5);
    z-index: 20;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media screen and (min-width: 1024px) and (max-width: 1599px) {
    .focus-wrap .content .close-creative[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 40px + 18px) / 2 + 9px)
    }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
    .focus-wrap .content .close-creative[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 40px + (100vw - 1600px) / 320 * 20 - var(--content-big-card-margin) + 24px + 27px) / 2 + 18px)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2159px) {
    .focus-wrap .content .close-creative[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 60px - var(--content-big-card-margin) + 24px + 27px) / 2 + 27px)
    }
}

@media screen and (min-width: 2160px) {
    .focus-wrap .content .close-creative[data-v-2d5ee0dd] {
        right:calc((100vw - var(--left-tab-width) - 1797px - 2 * var(--content-big-card-margin)) / 2 + 18px)
    }
}

.focus-wrap .creative-logo-wrap[data-v-2d5ee0dd] {
    display: flex;
    position: absolute;
    top: 92px;
    right: var(--content-margin);
    z-index: 13;
    justify-content: flex-end
}

@media screen and (min-width: 1024px) and (max-width: 1599px) {
    .focus-wrap .creative-logo-wrap[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 40px + 16px) / 2 + 9px)
    }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
    .focus-wrap .creative-logo-wrap[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 40px + (100vw - 1600px) / 320 * 20 - var(--content-big-card-margin) + 24px + 27px) / 2 + 16px)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2159px) {
    .focus-wrap .creative-logo-wrap[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 60px - var(--content-big-card-margin) + 24px + 27px) / 2 + 27px)
    }
}

@media screen and (min-width: 2160px) {
    .focus-wrap .creative-logo-wrap[data-v-2d5ee0dd] {
        right:calc((100vw - var(--left-tab-width) - 1797px - 2 * var(--content-big-card-margin)) / 2 + 16px)
    }
}

@media screen and (max-width: 1600px) {
    .focus-wrap .creative-logo-wrap[data-v-2d5ee0dd] {
        width:400px;
        height: 20px
    }
}

@media screen and (min-width: 1600px) {
    .focus-wrap .creative-logo-wrap[data-v-2d5ee0dd] {
        width:600px;
        height: 30px
    }
}

.focus-wrap .creative-logo-wrap .creative-logo[data-v-2d5ee0dd] {
    max-height: 100%
}

.focus-wrap .focus-logo-wrap[data-v-2d5ee0dd] {
    width: 100%;
    height: 99%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.focus-wrap .focus-list[data-v-2d5ee0dd] {
    position: absolute;
    right: var(--content-margin);
    bottom: var(--content-margin);
    z-index: 15;
    display: flex
}

@media screen and (min-width: 1024px) and (max-width: 1599px) {
    .focus-wrap .focus-list[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 40px + 16px) / 2 + 9px)
    }
}

@media screen and (min-width: 1600px) and (max-width: 1920px) {
    .focus-wrap .focus-list[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 40px + (100vw - 1600px) / 320 * 20 - var(--content-big-card-margin) + 24px + 27px) / 2 + 16px)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2159px) {
    .focus-wrap .focus-list[data-v-2d5ee0dd] {
        right:calc((var(--tab-content-gap) + 60px - var(--content-big-card-margin) + 24px + 27px) / 2 + 27px)
    }
}

@media screen and (min-width: 2160px) {
    .focus-wrap .focus-list[data-v-2d5ee0dd] {
        right:calc((100vw - var(--left-tab-width) - 1797px - 2 * var(--content-big-card-margin)) / 2 + 16px)
    }
}

.focus-wrap .focus-list .turn-page-btn[data-v-2d5ee0dd] {
    width: 24px;
    height: 43px;
    position: absolute;
    top: calc(50% - 17px);
    font-size: 29px;
    color: #fff;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 21
}

.focus-wrap .focus-list .turn-page-left[data-v-2d5ee0dd] {
    width: 44px;
    left: -42px;
    padding-left: 20px
}

.focus-wrap .focus-list .turn-page-right[data-v-2d5ee0dd] {
    right: -32px
}

.focus-wrap .focus-list .min-foucus-turn[data-v-2d5ee0dd] {
    top: 50%
}

.focus-wrap .focus-list .focus-list-content[data-v-2d5ee0dd] {
    display: flex;
    overflow: hidden
}

.focus-wrap .focus-list .focus-list-content img[src=""][data-v-2d5ee0dd],.focus-wrap .focus-list .focus-list-content img[data-v-2d5ee0dd]:not([src]) {
    opacity: 0
}

@media screen and (max-width: 1024px) {
    .focus-wrap .focus-list .focus-list-content[data-v-2d5ee0dd] {
        max-width:356px
    }
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
    .focus-wrap .focus-list .focus-list-content[data-v-2d5ee0dd] {
        max-width:calc((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 + var(--card-margin))
    }
}

@media screen and (min-width: 1601px) {
    .focus-wrap .focus-list .focus-list-content[data-v-2d5ee0dd] {
        max-width:652px
    }
}

.focus-wrap .focus-list .focus-item[data-v-2d5ee0dd] {
    margin-left: var(--card-margin);
    flex: none
}

.focus-wrap .focus-list .focus-item.active .title[data-v-2d5ee0dd] {
    color: #fff
}

.focus-wrap .focus-list .focus-item.active .poster img[src=""][data-v-2d5ee0dd],.focus-wrap .focus-list .focus-item.active .poster img[data-v-2d5ee0dd]:not([src]) {
    opacity: 0
}

.focus-wrap .focus-list .focus-item.active .poster .process-wrap[data-v-2d5ee0dd] {
    display: block
}

.focus-wrap .focus-list .focus-item.active .poster .unchoice-mask[data-v-2d5ee0dd] {
    display: none
}

@media screen and (max-width: 1280px) {
    .focus-wrap .focus-list .focus-item[data-v-2d5ee0dd] {
        width:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 3 * var(--card-margin)) / 4)
    }
}

@media screen and (max-width: 1280px) and (max-width: 1024px) {
    .focus-wrap .focus-list .focus-item[data-v-2d5ee0dd] {
        min-width:79px
    }
}

@media screen and (max-width: 1600px) and (min-width: 1281px) {
    .focus-wrap .focus-list .focus-item[data-v-2d5ee0dd] {
        width:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 4 * var(--card-margin)) / 5)
    }
}

@media screen and (min-width: 1601px) {
    .focus-wrap .focus-list .focus-item[data-v-2d5ee0dd] {
        width:calc(((100vw - var(--left-tab-width) - var(--content-margin) * 2 - var(--content-big-card-margin)) / 2 - 5 * var(--card-margin)) / 6);
        max-width: 96px
    }
}

.focus-wrap .focus-list .focus-item .poster[data-v-2d5ee0dd] {
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    width: 100%
}

.focus-wrap .focus-list .focus-item .poster.creative-poster[data-v-2d5ee0dd] {
    background-color: #000
}

.focus-wrap .focus-list .focus-item .poster.creative-poster .pic[data-v-2d5ee0dd] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: unset;
    border-radius: 0
}

.focus-wrap .focus-list .focus-item .poster .pic[data-v-2d5ee0dd] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    -o-object-fit: cover;
    object-fit: cover;
    font-family: "object-fit: cover;"
}

.focus-wrap .focus-list .focus-item .poster .process-wrap[data-v-2d5ee0dd] {
    display: none;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: rgba(255,255,255,.2);
    bottom: 0;
    left: 0
}

.focus-wrap .focus-list .focus-item .poster .process-wrap .occupy[data-v-2d5ee0dd] {
    height: 100%;
    background-color: #fff
}

.focus-wrap .focus-list .focus-item .poster .unchoice-mask[data-v-2d5ee0dd] {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.5)
}

.focus-wrap .focus-list .focus-item .poster .creative-flag[data-v-2d5ee0dd] {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 2px 6px;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    background-color: rgba(0,0,0,.45);
    border-radius: 3px;
    transform: scale(.8)
}

.focus-wrap .focus-list .focus-item .title[data-v-2d5ee0dd] {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(255,255,255,.6);
    letter-spacing: 0;
    text-align: center;
    margin-top: var(--card-margin);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    width: 100%;
    align-items: center
}

.info .vertical-poster {
    width: 57px;
    height: 80px;
    border-radius: 8px;
    margin-left: 10px
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .info .vertical-poster {
        margin-left:12px
    }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .info .vertical-poster {
        margin-left:16px
    }
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .info .vertical-poster {
        margin-left:12px
    }
}

@media screen and (min-width: 1600px) {
    .info .vertical-poster {
        margin-left:16px
    }
}

.info .error-svg-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 80px;
    margin-left: 10px;
    background-color: rgba(255,255,255,.1);
    border-radius: 8px
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .info .error-svg-wrap {
        margin-left:12px
    }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .info .error-svg-wrap {
        margin-left:16px
    }
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .info .error-svg-wrap {
        margin-left:12px
    }
}

@media screen and (min-width: 1600px) {
    .info .error-svg-wrap {
        margin-left:16px
    }
}

.info .intro {
    flex: 1;
    width: 0;
    margin-left: 11px
}

.info .intro .title {
    width: calc(100% - 90px);
    font-family: PingFangSC-Medium;
    font-size: 20px;
    color: #fff;
    letter-spacing: 0;
    height: 28px;
    line-height: 28px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.info .intro .second-row-wrap {
    line-height: 20px;
    margin-top: 5px;
    height: 20px
}

.info .intro .second-row-wrap .mid-video-user {
    width: calc(100% - 82px);
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,.6)
}

.info .intro .second-row-wrap .mid-video-user .avatar {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 4px
}

.info .intro .second-row-wrap .mid-video-user .username {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-right: 1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.info .intro .second-row-wrap .mid-video-user .icon {
    display: flex;
    opacity: .5
}

.info .intro .second-row-wrap .mid-video-user:hover {
    color: #fff
}

.info .intro .second-row-wrap .mid-video-user:hover .icon {
    opacity: 1
}

.info .intro .second-row-wrap .kind-status {
    display: flex;
    line-height: 20px;
    margin-top: 5px;
    height: 20px;
    width: calc(100% - 72px)
}

.info .intro .second-row-wrap .kind-status .kind-tag {
    background: #ff9419;
    border-radius: 4px;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 8px
}

.info .intro .second-row-wrap .kind-status .kind-tag .kind-tag-text {
    height: 20px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    letter-spacing: 0;
    white-space: nowrap
}

.info .intro .second-row-wrap .kind-status .kind {
    display: inline-flex;
    align-items: center;
    width: 95%;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: rgba(255,255,255,.6);
    letter-spacing: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.info .intro .second-row-wrap .kind-status .kind .highlight-label {
    display: flex;
    align-items: center;
    margin-right: 8px
}

.info .intro .second-row-wrap .kind-status .kind .highlight-label .label-icon {
    opacity: .6
}

.info .intro .second-row-wrap .kind-status .kind .normal-label {
    letter-spacing: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.info .intro .second-row-wrap .kind-status .sub-title,.info .intro .sub-title {
    width: 95%;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 20px;
    height: 20px
}

.video-card-wrap {
    min-width: 357px;
    min-height: 301px;
    width: var(--flow-card-width);
    height: calc(var(--flow-card-width) * var(--card-width-height-proportion) + 100px)
}

.video-card-wrap .video-info-wrap {
    display: block;
    height: 100px;
    position: relative
}

.video-card-wrap .video-info-wrap .video-subscribe-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 12px;
    right: 12px;
    width: 62px;
    height: var(--card-sub-height);
    z-index: 12;
    background: rgba(255,255,255,.15);
    cursor: pointer;
    border-radius: 36px;
    z-index: 14
}

.video-card-wrap .video-info-wrap .video-subscribe-btn .video-subscribe-text {
    color: #fff;
    font-size: 14px;
    margin-left: 7px
}

.video-card-wrap .video-info-wrap .video-subscribe-btn .video-subscribe-text-active {
    color: rgba(255,255,255,.6);
    font-size: 14px
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .video-card-wrap .video-info-wrap .video-subscribe-btn {
        right:12px
    }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .video-card-wrap .video-info-wrap .video-subscribe-btn {
        right:16px
    }
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .video-card-wrap .video-info-wrap .video-subscribe-btn {
        right:12px
    }
}

@media screen and (min-width: 1600px) {
    .video-card-wrap .video-info-wrap .video-subscribe-btn {
        right:16px
    }
}

.video-card-wrap .video-card {
    width: 100%;
    height: calc(100% - 100px);
    position: relative;
    display: block;
    z-index: 12
}

.video-card-wrap .video-card .video-card-background {
    width: 100%;
    height: 100%;
    border-radius: 16px 16px 0 0
}

.video-card-wrap .video-card img {
    -o-object-fit: cover;
    object-fit: cover
}

.video-card-wrap .duration {
    display: inline-block;
    position: absolute;
    left: 10px;
    bottom: 108px;
    z-index: 13;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #fff
}

.video-card-wrap .danmaku-control-wrap {
    display: inline-block;
    position: absolute;
    right: 43px;
    bottom: 104px;
    z-index: 13;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.loading-wrap {
    width: calc(100vw - var(--left-tab-width));
    height: 24px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: rgba(255,255,255,.6)
}

@media screen and (max-width: 1600px) {
    .loading-wrap {
        width:var(--card-module-width-0-1600px)
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .loading-wrap {
        width:var(--card-module-width-1600-1920px)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .loading-wrap {
        width:var(--card-module-width-1920-2160px)
    }
}

@media screen and (min-width: 2161px) {
    .loading-wrap {
        width:var(--card-module-width-2160px)
    }
}

.album-card-wrap {
    --vertical-poster-proportion: 1.5;
    padding: var(--content-big-card-margin);
    padding-top: 22px;
    box-sizing: border-box;
    background-color: #2b2b2b;
    z-index: 12;
    font-family: PingFang SC;
    font-style: normal;
    overflow: hidden
}

.album-card-wrap img {
    -o-object-fit: cover;
    object-fit: cover
}

.album-card-wrap .album-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.album-card-wrap .album-header .title {
    max-width: calc(100% - 78px);
    min-width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #fff
}

.album-card-wrap .album-header .page-turner {
    display: flex;
    color: rgba(255,255,255,.6);
    line-height: 7px
}

.album-card-wrap .album-header .page-turner .left-arrow,.album-card-wrap .album-header .page-turner .right-arrow {
    opacity: .6;
    cursor: pointer
}

.album-card-wrap .album-header .page-turner .left-arrow {
    margin-right: -.5px
}

.album-card-wrap .album-header .page-turner .arrow-banned {
    opacity: .2;
    cursor: auto
}

.album-card-wrap .album-header .page-turner .page-num {
    display: flex;
    align-items: center;
    font-weight: 500;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

.album-card-wrap .album-header .page-turner .page-num .diagonal {
    font-size: 17px;
    font-weight: 600
}

.album-card-wrap .album-header .page-turner .page-num .number {
    text-align: center;
    font-size: 20px;
    margin-left: 2px;
    margin-right: 2px;
    min-width: 12px
}

.album-card-wrap .album-content {
    display: flex;
    --album-content-width: calc(var(--flow-card-width) - 2 * var(--content-big-card-margin) + var(--card-margin));
    --poster-width: calc((var(--album-content-width) - 2 * var(--card-margin)) / 3);
    width: var(--album-content-width)
}

.album-card-wrap .album-content .album-item {
    display: block;
    min-width: 95px;
    min-height: 142.5px;
    width: var(--poster-width);
    height: calc(var(--poster-width) * var(--vertical-poster-proportion));
    margin-right: var(--card-margin)
}

.album-card-wrap .album-content .album-item-title {
    width: 100%;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.album-card-wrap .album-content .album-item-subtitle {
    width: 100%;
    display: inline-block;
    color: rgba(255,255,255,.4);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.album-card-wrap .album-content .album-item .album-item-poster-wrap {
    position: relative;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden
}

.album-card-wrap .album-content .album-item .album-item-poster-wrap .poster {
    min-width: 95px;
    min-height: 142.5px;
    width: 100%;
    border-radius: 8px
}

.album-card-wrap .album-content .album-item .album-item-poster-wrap .mask {
    position: absolute;
    height: 45px;
    width: 100%;
    bottom: 0;
    background: linear-gradient(360deg,rgba(0,0,0,.4) 2.29%,rgba(0,0,0,.0001) 99.71%);
    border-radius: 0 0 8px 8px;
    z-index: 13
}

.album-card-wrap .album-content .album-item .album-item-poster-wrap .right-top-tag-wrap {
    position: absolute;
    top: 0px;
    right: 0px;
    overflow: hidden
}

.album-card-wrap .album-content .album-item .album-item-poster-wrap .right-top-tag-wrap .imgTag {
    max-height: 23px;
    margin-top: 2px;
    margin-right: 2px
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .album-card-wrap .album-content .album-item .album-item-poster-wrap .right-top-tag-wrap .imgTag {
        max-height:20px
    }
}

@media screen and (max-width: 1060px) {
    .album-card-wrap .album-content .album-item .album-item-poster-wrap .right-top-tag-wrap .imgTag {
        max-height:20px
    }
}

.album-card-wrap .album-content .album-item .album-item-poster-wrap .right-bottom-text {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 14;
    font-weight: 400;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: right;
    color: #fff
}

.card-wrap {
    background-color: red;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer
}

.card-wrap .card-info-wrap {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-content: flex-start;
    height: 100px;
    padding: 12px 12px 15px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,.1)
}

.card-wrap .card-info-wrap .left-info {
    flex-grow: 1
}

.card-wrap .card-info-wrap .left-info .title {
    margin-bottom: 5px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.card-wrap .card-info-wrap .left-info .infos img.avatar {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 4px
}

.card-wrap .card-info-wrap .left-info .infos span.name {
    color: rgba(255,255,255,.6);
    font-size: 14px;
    line-height: 22px
}

.card-wrap .card-info-wrap .right-btn {
    height: var(--card-sub-height);
    line-height: 32px;
    min-width: 88px;
    margin-left: 20px;
    background-color: rgba(255,255,255,.15);
    border-radius: 36px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer
}

.card-wrap .card {
    width: 100%;
    height: calc(100% - 100px);
    position: relative;
    display: block;
    z-index: 12
}

.card-wrap .card .video-card-background {
    width: 100%;
    height: 100%;
    border-radius: 16px 16px 0 0
}

.card-wrap .card img {
    -o-object-fit: cover;
    object-fit: cover
}

.card-wrap .card .small-qrcode-container {
    position: absolute;
    top: 12px;
    left: 12px
}

.card-wrap .card .small-qrcode-container .small-qrcode {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 136px;
    border-radius: 4px;
    background-color: #fff;
    padding: 10px 10px 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    z-index: 2;
    transform: scaleX(.4) scaleY(.35);
    transform-origin: 0 0
}

.card-wrap .card .small-qrcode-container .small-qrcode__icon {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.3);
    width: 48px;
    height: 48px;
    border-radius: 4px;
    z-index: 1
}

.card-wrap .card .small-qrcode-container .small-qrcode span {
    display: inline-block;
    margin-top: 6px;
    font-size: 20px;
    line-height: 28px;
    white-space: nowrap;
    transform: scale(.5);
    transform-origin: 50% 0
}

.card-wrap .card .small-qrcode-container:hover .small-qrcode {
    opacity: 1;
    transform: scale(1)
}

.card-wrap .card .small-qrcode-container:hover .small-qrcode__icon {
    opacity: 0
}

.card-wrap .card .qrcode-wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 20;
    background-color: rgba(0,0,0,.6)
}

.card-wrap .card .qrcode-wrap .qrcode-container {
    width: 136px;
    height: 136px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box
}

.card-wrap .card .qrcode-wrap span {
    color: #fff;
    font-size: 14px;
    line-height: 22px
}

.card-wrap .close-btn {
    display: flex;
    justify-content: center;
    align-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 48px;
    height: 20px;
    border-radius: 4px;
    background-color: rgba(0,0,0,.4);
    color: #fff;
    font-size: 12px;
    z-index: 20;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.card-wrap .close-btn .icon {
    margin-top: 2px
}

.card-module-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -12px;
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    min-width: 738px
}

@media screen and (min-width: 2161px) {
    .card-module-head {
        margin-left:var(--content-left-margin-max)
    }
}

@media screen and (max-width: 1600px) {
    .card-module-head {
        width:var(--card-module-width-0-1600px)
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .card-module-head {
        width:var(--card-module-width-1600-1920px)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .card-module-head {
        width:var(--card-module-width-1920-2160px)
    }
}

@media screen and (min-width: 2161px) {
    .card-module-head {
        width:var(--card-module-width-2160px)
    }
}

.card-module-head .card-module-title {
    font-size: 30px;
    color: #fff;
    font-family: PingFangSC-Medium
}

.card-module-head .placeholder-wrap {
    display: flex;
    align-items: center
}

.card-module-head .placeholder-wrap .placeholder-link {
    display: inline-block;
    margin-left: 20px
}

.card-module-head .placeholder-wrap .placeholder-link .placeholder-img {
    height: 32px
}

.video-card-module {
    --flow-card-width: calc( (var(--flow-module-width) - var(--flow-screen-line-num) * var(--content-big-card-margin)) / var(--flow-screen-line-num) );
    margin-top: 24px;
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    margin-right: var(content-right-margin);
    display: flex;
    flex-flow: wrap;
    border-radius: 16px;
    overflow: hidden;
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap))
}

.video-card-module img[src=""],.video-card-module img:not([src]) {
    opacity: 0
}

@media screen and (max-width: 1600px) {
    .video-card-module {
        --flow-module-width: calc(var(--card-module-width-0-1600px) + var(--content-big-card-margin));
        width: var(--flow-module-width)
    }
}

@media screen and (max-width: 1600px) and (max-width: 1280px) {
    .video-card-module {
        --flow-screen-line-num: 2
    }
}

@media screen and (max-width: 1600px) and (min-width: 1280px) and (max-width: 1439px) {
    .video-card-module {
        --flow-screen-line-num: 2
    }
}

@media screen and (max-width: 1600px) and (min-width: 1440px) and (max-width: 1600px) {
    .video-card-module {
        --flow-screen-line-num: 3
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .video-card-module {
        --flow-module-width: calc(var(--card-module-width-1600-1920px) + var(--content-big-card-margin));
        --flow-screen-line-num: 3;
        width: var(--flow-module-width);
        margin-right: var(--content-right-margin-active)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .video-card-module {
        --flow-module-width: calc(var(--card-module-width-1920-2160px) + var(--content-big-card-margin));
        --flow-screen-line-num: 3;
        width: var(--flow-module-width);
        margin-right: var(content-right-margin-max)
    }
}

@media screen and (min-width: 2161px) {
    .video-card-module {
        --flow-module-width: calc(var(--card-module-width-2160px) + var(--content-big-card-margin));
        --flow-screen-line-num: 3;
        width: var(--flow-module-width);
        margin-left: var(--content-left-margin-max)
    }
}

.video-card-wrap,.card-wrap,.album-card-wrap {
    position: relative;
    min-width: 357px;
    min-height: 301px;
    --flow-card-width: calc( (var(--flow-module-width) - var(--flow-screen-line-num) * var(--content-big-card-margin)) / var(--flow-screen-line-num) );
    width: var(--flow-card-width);
    height: calc(var(--flow-card-width) * var(--card-width-height-proportion) + 100px);
    margin-right: var(--content-big-card-margin);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    margin-bottom: var(--content-big-card-margin)
}

.video-card-wrap .volume-control-wrap,.card-wrap .volume-control-wrap,.album-card-wrap .volume-control-wrap {
    display: inline-block;
    position: absolute;
    right: 10px;
    bottom: 105px;
    z-index: 13;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.video-card-wrap .video-container-wrap,.card-wrap .video-container-wrap,.album-card-wrap .video-container-wrap {
    width: 100%;
    height: calc(100% - 100px);
    position: absolute;
    left: 0;
    top: 0
}

.video-card-wrap .video-container-wrap .video-container,.card-wrap .video-container-wrap .video-container,.album-card-wrap .video-container-wrap .video-container {
    width: 100%;
    height: 100%;
    background-color: coral;
    position: absolute;
    left: 0;
    top: 0
}

.video-card-wrap .video-container-wrap .video-container video,.card-wrap .video-container-wrap .video-container video,.album-card-wrap .video-container-wrap .video-container video {
    -o-object-fit: cover!important;
    object-fit: cover!important;
    font-family: "object-fit: cover;"
}

.turn-page-wrap .change-page-wrap {
    margin-top: 10px;
    height: 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer
}

.turn-page-wrap .change-page-wrap .change-page {
    font-size: 14px;
    padding-left: 7px;
    color: #fff;
    line-height: 20px
}

.turn-page-wrap .num-page-wrap {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.turn-page-wrap .num-page-wrap .turn-arrow-pre {
    display: inline-block;
    padding: 15px 8px 5px 15px;
    text-align: center;
    opacity: .6;
    cursor: pointer
}

.turn-page-wrap .num-page-wrap .turn-arrow-next {
    display: inline-block;
    padding: 25px 3px 5px 8px;
    text-align: center;
    opacity: .6;
    cursor: pointer
}

.turn-page-wrap .num-page-wrap .turn-arrow-none {
    opacity: .2!important;
    cursor: auto
}

.turn-page-wrap .num-page-wrap .page-num-text {
    font-size: 16px;
    color: #fff
}

.page-arrow-wrap .page-left-wrap {
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    z-index: 19
}

.page-arrow-wrap .page-right-wrap {
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    z-index: 19
}

@media screen and (max-width: 1050px) {
    .page-arrow-wrap .page-right-wrap {
        right:3px
    }
}

@media screen and (min-width: 1050px) and (max-width: 1070px) {
    .page-arrow-wrap .page-right-wrap {
        right:-15px
    }
}

.page-arrow-wrap .arrow-second-style {
    opacity: .4!important;
    cursor: auto
}

.banner-item-detail {
    position: absolute;
    top: 121.5px;
    width: 100%;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    transform: rotate(0)
}

@media screen and (max-width: 1024px) {
    .banner-item-detail {
        top:128px!important
    }
}

.banner-item-detail .banner-detail-info {
    position: relative;
    height: 70px;
    padding: 10px
}

.banner-item-detail .banner-detail-info .title {
    width: calc(100% - 64px);
    color: #fff;
    margin-bottom: 8px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.banner-item-detail .banner-detail-info .no-btn-title {
    width: 100%
}

.banner-item-detail .banner-detail-info .video-subscribe-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 8px;
    width: 62px;
    height: 32px;
    cursor: pointer;
    z-index: 14
}

.banner-item-detail .banner-detail-info .video-subscribe-btn .video-subscribe-text {
    color: #fff;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    margin-left: 7px
}

.banner-item-detail .banner-detail-info .video-subscribe-btn .video-subscribe-text-active {
    color: rgba(255,255,255,.6);
    font-size: 14px
}

.banner-item-detail .banner-detail-info .video-subscribe-background {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 62px;
    height: 32px;
    background: rgba(255,255,255,.15);
    border-radius: 36px;
    filter: blur(0);
    z-index: 12
}

.banner-item-detail .banner-detail-info .tag-wrap {
    display: block;
    width: 75%;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    color: rgba(255,255,255,.6)
}

.banner-item-detail .banner-detail-info .sub-title {
    display: block;
    width: 95%;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: rgba(255,255,255,.6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.video-banner-item {
    position: relative;
    margin-bottom: 40px;
    margin-right: var(--content-big-card-margin);
    flex: none;
    border-radius: 8px;
    min-width: 216px
}

@media screen and (min-width: 1281px) and (max-width: 1292px) {
    .video-banner-item {
        margin-right:21px
    }
}

.video-banner-item .banner-item-detail {
    top: var(--banner-card-height)
}

.video-banner-item:nth-child(1) {
    margin-left: 0
}

.video-banner-item .banner-cover-wrap {
    width: var(--banner-card-width);
    height: var(--banner-card-height);
    min-width: 216px;
    min-height: 121.5px;
    position: relative;
    display: flex;
    z-index: 12
}

.video-banner-item .banner-cover-wrap .banner-cover {
    width: 100%;
    height: 100%
}

.video-banner-item .banner-cover-wrap .banner-corner-wrap {
    position: absolute;
    right: 10px;
    font-family: PingFangSC-Medium;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    bottom: 4px;
    z-index: 11
}

.video-banner-item .banner-cover-wrap .right-top-tag-area {
    position: absolute;
    top: 0px;
    right: 0px;
    overflow: hidden
}

.video-banner-item .banner-cover-wrap .right-top-tag-area .rec-tag {
    display: block;
    background-color: #ff650f;
    color: #fff;
    padding: 2px 5px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px
}

.video-banner-item .banner-cover-wrap .right-top-tag-area .imgTag {
    max-height: 23px;
    margin-top: 2px;
    margin-right: 2px
}

.video-banner-item .banner-cover-wrap .banner-bottom-mask {
    position: absolute;
    height: 48px;
    bottom: 0;
    background: linear-gradient(360deg,rgba(0,0,0,.399257) 2.29%,rgba(0,0,0,.0001) 99.71%);
    z-index: 10;
    width: 100%
}

.video-banner-item .twice-title-area {
    width: var(--banner-card-width)
}

.video-banner-item .twice-title-area .banner-title {
    display: block;
    margin-top: 8px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

@media screen and (max-width: 1124px) {
    .video-banner-item .twice-title-area .banner-title {
        max-width:230px
    }
}

.video-banner-item .twice-title-area .banner-subtitle {
    margin-top: 4px;
    opacity: .4;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

@media screen and (max-width: 1124px) {
    .video-banner-item .twice-title-area .banner-subtitle {
        max-width:230px
    }
}

.video-banner-item .twice-title-area .canHoverSubTitleStyle {
    height: 18px
}

.video-banner-item .canHoverAreaStyle {
    height: 44px
}

.video-banner-item .turn-title-area {
    width: var(--banner-card-width)
}

.video-banner-item .turn-title-area .turn-banner-title {
    margin-top: 8px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

@media screen and (max-width: 1124px) {
    .video-banner-item .turn-title-area .turn-banner-title {
        max-width:230px
    }
}

.video-banner-item .volume-control-wrap {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 14;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer
}

.vertical-poster[data-v-4f391f6b] {
    position: relative;
    margin-bottom: 40px;
    margin-right: var(--content-big-card-margin);
    width: var(--vertical-banner-card-width);
    min-width: 166px;
    font-family: PingFangSC-Regular;
    flex: none
}

.vertical-poster__container[data-v-4f391f6b] {
    width: 100%;
    height: 100%
}

.vertical-poster__main[data-v-4f391f6b] {
    display: block;
    width: 100%;
    height: var(--vertical-banner-card-height);
    min-height: 231px;
    border-radius: 8px;
    position: relative;
    overflow: hidden
}

.vertical-poster__main[data-v-4f391f6b]:before {
    content: "";
    display: block;
    position: absolute;
    height: 48px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(360deg,rgba(0,0,0,.399257) 2.29%,rgba(0,0,0,.0001) 99.71%);
    background-blend-mode: multiply;
    border-radius: 8px
}

.vertical-poster__pic[data-v-4f391f6b] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.vertical-poster__tag[data-v-4f391f6b] {
    position: absolute;
    max-height: 27px;
    right: 2px;
    top: 2px
}

.vertical-poster__corner[data-v-4f391f6b] {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-weight: 500
}

.vertical-poster__corner.score[data-v-4f391f6b] {
    font-size: 18px;
    line-height: 18px;
    color: #ff7612;
    text-shadow: 0px 0px 3px rgba(0,0,0,.404032)
}

.vertical-poster__corner.text[data-v-4f391f6b] {
    font-size: 13px;
    line-height: 13px;
    color: #fff;
    text-shadow: 0px 0px 3px rgba(0,0,0,.404032)
}

.vertical-poster__title[data-v-4f391f6b] {
    display: block;
    margin: 10px 0 4px;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    height: 22px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.vertical-poster__subtitle[data-v-4f391f6b] {
    color: rgba(255,255,255,.4);
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.banner-filter-wrap {
    height: 100%;
    display: flex;
    white-space: nowrap
}

.banner-filter-wrap .banner-filter-item {
    padding-top: 12px;
    margin-left: 24px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: rgba(255,255,255,.6);
    cursor: pointer
}

@media screen and (max-width: 1040px) {
    .banner-filter-wrap .banner-filter-item:nth-child(6)~span {
        display:none
    }
}

.banner-filter-wrap .banner-filter-item-max {
    display: inline-block;
    font-size: 16px;
    margin-left: 40px;
    margin-bottom: 5px
}

.banner-filter-wrap .banner-filter-item-max:nth-child(1) {
    margin-left: 0
}

.banner-filter-wrap .banner-filter-item-max:hover {
    color: #fff
}

.banner-filter-wrap .banner-filter-item-active {
    color: #fff;
    font-weight: 500;
    cursor: pointer
}

.banner-filter-wrap .banner-filter-item-max-active {
    color: #fff;
    font-weight: 500
}

.video-banner-module {
    --title-margin-bottom: 15px;
    --title-text-height: 45px;
    display: flex;
    flex-flow: wrap;
    margin-right: var(content-right-margin);
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap));
    --banner-card-width: calc( (var(--banner-module-width) - var(--banner-screen-line-num) * var(--content-big-card-margin)) / var(--banner-screen-line-num) );
    --banner-card-height: calc(var(--banner-card-width) * var(--card-width-height-proportion));
    --vertical-banner-card-width: calc( (var(--banner-module-width) - var(--vertical-banner-screen-line-num) * var(--content-big-card-margin)) / var(--vertical-banner-screen-line-num) );
    --vertical-banner-card-height: calc( var(--vertical-banner-card-width) * var(--vertical-card-width-height-proportion) )
}

@media screen and (max-width: 1600px) {
    .video-banner-module {
        --banner-module-width: calc(var(--card-module-width-0-1600px) + var(--content-big-card-margin));
        width: var(--banner-module-width)
    }
}

@media screen and (max-width: 1600px) and (max-width: 1280px) {
    .video-banner-module {
        --banner-screen-line-num: 3;
        --vertical-banner-screen-line-num: 4
    }
}

@media screen and (max-width: 1600px) and (min-width: 1280px) and (max-width: 1440px) {
    .video-banner-module {
        --banner-screen-line-num: 4;
        --vertical-banner-screen-line-num: 5
    }
}

@media screen and (max-width: 1600px) and (min-width: 1441px) and (max-width: 1600px) {
    .video-banner-module {
        --banner-screen-line-num: 5;
        --vertical-banner-screen-line-num: 6
    }
}

@media screen and (min-width: 1601px) and (max-width: 1919px) {
    .video-banner-module {
        --banner-module-width: calc(var(--card-module-width-1600-1920px) + var(--content-big-card-margin));
        --banner-screen-line-num: 5;
        --vertical-banner-screen-line-num: 6;
        margin-right: var(--content-right-margin-active);
        width: var(--banner-module-width)
    }
}

@media screen and (min-width: 1920px) and (max-width: 2160px) {
    .video-banner-module {
        --banner-module-width: calc(var(--card-module-width-1920-2160px) + var(--content-big-card-margin));
        --banner-screen-line-num: 6;
        --vertical-banner-screen-line-num: 7;
        margin-right: var(content-right-margin-max);
        width: var(--banner-module-width)
    }
}

@media screen and (min-width: 2161px) {
    .video-banner-module {
        --banner-module-width: calc(var(--card-module-width-2160px) + var(--content-big-card-margin));
        --banner-screen-line-num: 6;
        --vertical-banner-screen-line-num: 7;
        margin-left: var(--content-left-margin-max);
        width: var(--banner-module-width)
    }
}

.video-banner-module .banner-turner-wrap {
    --banner-item-width: calc((var(--banner-module-width) - var(--banner-screen-line-num) * var(--content-big-card-margin)) / var(--banner-screen-line-num));
    --banner-item-height: calc(var(--banner-item-width) * var(--card-width-height-proportion));
    position: absolute;
    top: var(--title-margin-bottom);
    width: 100%;
    height: var(--banner-item-height)
}

@media screen and (max-width: 1024px) {
    .video-banner-module .banner-turner-wrap {
        height:128px
    }
}

.video-banner-module img[src=""],.video-banner-module img:not([src]) {
    opacity: 0
}

@media screen and (max-width: 1024px) {
    .video-banner-module {
        --banner-card-width: 230px
    }
}

.video-banner-module .banner-head {
    display: flex;
    position: relative;
    width: 100%;
    margin-right: var(--content-big-card-margin);
    min-width: 738px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--title-margin-bottom)
}

.video-banner-module .banner-head .banner-mod-title {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Medium;
    font-size: 30px;
    color: #fff;
    letter-spacing: 0
}

.video-banner-module .banner-head .banner-mod-title .text {
    margin-left: 2px;
    margin-right: 2px
}

.video-banner-module .banner-head .banner-mod-title .banner-filter-placeholder {
    display: flex;
    position: relative;
    height: 45px
}

.video-banner-module .banner-head .banner-mod-title .banner-filter-placeholder .banner-filter-tab {
    position: absolute;
    height: 100%;
    top: -2px;
    left: 48px
}

.video-banner-module .banner-head .banner-mod-title .banner-filter-placeholder .banner-filter-tab:before {
    content: "";
    position: absolute;
    background-color: rgba(255,255,255,.5);
    width: 1px;
    height: 22px;
    left: -25px;
    top: 15px
}

.video-banner-module .banner-head .placeholder-wrap {
    display: flex;
    align-items: center
}

.video-banner-module .banner-head .placeholder-wrap .placeholder-link {
    display: inline-block;
    margin-left: 20px
}

.video-banner-module .banner-head .placeholder-wrap .placeholder-link .placeholder-img {
    height: 32px
}

@media screen and (max-width: 1040px) {
    .video-banner-module .banner-head {
        width:738px
    }
}

.video-banner-module .banner-head .banner-turner-wrap {
    position: absolute;
    top: var(--title-margin-bottom);
    width: var(--banner-module-width);
    min-width: 778px
}

@media screen and (max-width: 1024px) {
    .video-banner-module .banner-head .banner-turner-wrap {
        height:128px
    }
}

.video-banner-module .banner-head .horizontal-turner {
    height: var(--banner-card-height)
}

@media screen and (max-width: 1024px) {
    .video-banner-module .banner-head .horizontal-turner {
        height:128px
    }
}

.video-banner-module .banner-head .vertical-turner {
    height: var(--vertical-banner-card-height)
}

@media screen and (max-width: 1024px) {
    .video-banner-module .banner-head .vertical-turner {
        height:168px
    }
}

.video-banner-module .banner-head-has-tab {
    justify-content: flex-start
}

.video-banner-module .banner-list-wrap {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    overflow: hidden
}

.video-banner-module .horizontal-list {
    max-height: calc((var(--banner-card-height) + 40px + 52px) * 2);
    min-height: 162px
}

.video-banner-module .horizontal-list .video-container-wrap {
    position: absolute;
    width: var(--banner-card-width);
    height: var(--banner-card-height);
    min-width: 216px!important;
    min-height: 121.5px!important;
    left: 0;
    top: 0
}

.video-banner-module .horizontal-list .video-container-wrap .video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 8px 8px 0 0
}

.video-banner-module .horizontal-list .video-container-wrap .video-container video {
    -o-object-fit: cover!important;
    object-fit: cover!important;
    border-radius: 8px 8px 0 0
}

.video-banner-module .vertical-list {
    max-height: calc((var(--vertical-banner-card-height) + 40px + 52px) * 2);
    min-height: 230px
}

.form-banner-module {
    --title-margin-bottom: 15px;
    --title-text-height: 45px;
    display: flex;
    flex-flow: wrap;
    margin-right: var(content-right-margin);
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap));
    --banner-card-width: calc( (var(--banner-module-width) - var(--banner-screen-line-num) * var(--content-big-card-margin)) / var(--banner-screen-line-num) );
    --banner-card-height: calc(var(--banner-card-width) * var(--card-width-height-proportion))
}

@media screen and (max-width: 1600px) {
    .form-banner-module {
        --banner-module-width: calc(var(--card-module-width-0-1600px) + var(--content-big-card-margin));
        width: var(--banner-module-width)
    }
}

@media screen and (max-width: 1600px) and (max-width: 1280px) {
    .form-banner-module {
        --banner-screen-line-num: 3;
        --vertical-banner-screen-line-num: 4
    }
}

@media screen and (max-width: 1600px) and (min-width: 1280px) and (max-width: 1440px) {
    .form-banner-module {
        --banner-screen-line-num: 4;
        --vertical-banner-screen-line-num: 5
    }
}

@media screen and (max-width: 1600px) and (min-width: 1441px) and (max-width: 1600px) {
    .form-banner-module {
        --banner-screen-line-num: 5;
        --vertical-banner-screen-line-num: 6
    }
}

@media screen and (min-width: 1601px) and (max-width: 1919px) {
    .form-banner-module {
        --banner-module-width: calc(var(--card-module-width-1600-1920px) + var(--content-big-card-margin));
        --banner-screen-line-num: 5;
        --vertical-banner-screen-line-num: 6;
        margin-right: var(--content-right-margin-active);
        width: var(--banner-module-width)
    }
}

@media screen and (min-width: 1920px) and (max-width: 2160px) {
    .form-banner-module {
        --banner-module-width: calc(var(--card-module-width-1920-2160px) + var(--content-big-card-margin));
        --banner-screen-line-num: 6;
        --vertical-banner-screen-line-num: 7;
        margin-right: var(content-right-margin-max);
        width: var(--banner-module-width)
    }
}

@media screen and (min-width: 2161px) {
    .form-banner-module {
        --banner-module-width: calc(var(--card-module-width-2160px) + var(--content-big-card-margin));
        --banner-screen-line-num: 6;
        --vertical-banner-screen-line-num: 7;
        margin-left: var(--content-left-margin-max);
        width: var(--banner-module-width)
    }
}

.form-banner-module .banner-turner-wrap {
    --banner-item-width: calc((var(--banner-module-width) - var(--banner-screen-line-num) * var(--content-big-card-margin)) / var(--banner-screen-line-num));
    --banner-item-height: calc(var(--banner-item-width) * var(--card-width-height-proportion));
    position: absolute;
    top: var(--title-margin-bottom);
    width: 100%;
    height: var(--banner-item-height)
}

@media screen and (max-width: 1024px) {
    .form-banner-module .banner-turner-wrap {
        height:128px
    }
}

.form-banner-module img[src=""],.form-banner-module img:not([src]) {
    opacity: 0
}

@media screen and (max-width: 1024px) {
    .form-banner-module {
        --banner-card-width: 230px
    }
}

.form-banner-module .form-banner-head {
    position: relative;
    width: 100%;
    min-width: 738px;
    display: flex;
    align-items: center;
    margin-bottom: var(--title-margin-bottom)
}

@media screen and (max-width: 1040px) {
    .form-banner-module .form-banner-head {
        width:738px
    }
}

.form-banner-module .form-banner-head .form-mod-title {
    font-family: PingFangSC-Medium;
    font-size: 30px;
    color: #fff;
    letter-spacing: 0
}

.form-banner-module .form-banner-head .banner-turner-wrap {
    position: absolute;
    top: var(--title-margin-bottom);
    width: var(--banner-module-width);
    height: var(--banner-card-height);
    min-width: 778px
}

@media screen and (max-width: 1024px) {
    .form-banner-module .form-banner-head .banner-turner-wrap {
        height:128px
    }
}

.form-banner-module .form-banner-item-wrap {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    min-height: 162px
}

.schedule-banner-item:hover {
    color: #fff
}

.schedule-banner-item {
    flex: none;
    position: relative;
    min-height: 160px;
    width: calc((var(--schedule-module-width) - var(--schedule-screen-line-num) * var(--content-big-card-margin)) / var(--schedule-screen-line-num));
    margin-right: var(--content-big-card-margin);
    border-radius: 16px;
    color: #fff;
    background-color: rgba(255,255,255,.1);
    text-decoration: none
}

@media screen and (max-width: 1040px) {
    .schedule-banner-item {
        width:357px
    }
}

.schedule-banner-item:nth-child(1) {
    margin-left: 0
}

.schedule-banner-item .schedule-banner-title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #ffdf8a;
    background: rgba(251,242,201,.2);
    border-radius: 16px 16px 0 0;
    padding: 12px
}

.schedule-banner-item .schedule-active-title {
    color: #ff6022;
    background: rgba(255,167,133,.2)
}

.schedule-banner-item .schedule-banner-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 2px
}

.schedule-banner-item .schedule-banner-date .time {
    font-size: 16px;
    color: rgba(255,255,255,.6)
}

.schedule-banner-item .schedule-banner-date .status {
    transform: scale(1.45)
}

.schedule-banner-item .schedule-banner-date .status svg {
    margin-top: 3px
}

.schedule-banner-item .team-wrap {
    position: relative;
    padding: 0 16px 6px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px
}

.schedule-banner-item .team-wrap .team {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px
}

.schedule-banner-item .team-wrap .team-info {
    display: flex;
    align-items: center
}

.schedule-banner-item .team-wrap .team-info .team-avatar {
    width: 35px;
    height: 35px;
    border-radius: 18px;
    margin-right: 10px
}

.schedule-banner-item .team-wrap .score {
    padding-top: 5px
}

.schedule-banner-item .schedule-subscribe-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: calc(50% + 19px);
    right: 18px;
    width: 66px;
    height: 32px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 14
}

.schedule-banner-item .schedule-subscribe-btn .schedule-subscribe-text {
    color: #fff;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px
}

.schedule-banner-item .schedule-subscribe-btn .schedule-subscribe-text-active {
    color: rgba(255,255,255,.6);
    font-size: 14px
}

.schedule-banner-item .schedule-subscribe-background {
    position: absolute;
    top: calc(50% + 19px);
    right: 18px;
    width: 66px;
    height: 32px;
    background: rgba(255,255,255,.15);
    border-radius: 36px;
    filter: blur(0);
    z-index: 12
}

.schedule-banner-item .schedule-detail-wrap {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 84px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px
}

.schedule-banner-item .schedule-detail-wrap .schedule-detail-text {
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.schedule-banner-item .short-detail {
    width: calc(100% - 114px)
}

.schedule-banner-module {
    display: flex;
    flex-flow: wrap;
    margin-bottom: 40px;
    margin-right: var(content-right-margin);
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap));
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.schedule-banner-module .schedule-banner-head {
    position: relative;
    width: 100%;
    min-width: 738px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.schedule-banner-module .schedule-banner-head .nba-mod-title {
    font-family: PingFangSC-Medium;
    font-size: 30px;
    color: #fff;
    letter-spacing: 0
}

.schedule-banner-module .schedule-banner-head .banner-turner-wrap {
    position: absolute;
    top: var(--title-margin-bottom);
    width: var(--schedule-module-width);
    height: 168px;
    min-height: 160px;
    min-width: 778px
}

.schedule-banner-module .schedule-banner-item-wrap {
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap));
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    min-height: 160px;
    overflow: hidden
}

@media screen and (max-width: 1600px) {
    .schedule-banner-module {
        --schedule-module-width: calc(var(--card-module-width-0-1600px) + var(--content-big-card-margin));
        width: var(--schedule-module-width)
    }

    .schedule-banner-module .schedule-banner-head {
        width: var(--schedule-module-width)
    }
}

@media screen and (max-width: 1600px) and (max-width: 1280px) {
    .schedule-banner-module {
        --schedule-screen-line-num: 2
    }
}

@media screen and (max-width: 1600px) and (min-width: 1280px) and (max-width: 1439px) {
    .schedule-banner-module {
        --schedule-screen-line-num: 2
    }
}

@media screen and (max-width: 1600px) and (min-width: 1440px) and (max-width: 1600px) {
    .schedule-banner-module {
        --schedule-screen-line-num: 3
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .schedule-banner-module {
        margin-right:var(--content-right-margin-active);
        --schedule-module-width: calc(var(--card-module-width-1600-1920px) + var(--content-big-card-margin));
        --schedule-screen-line-num: 3;
        width: var(--schedule-module-width)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .schedule-banner-module {
        --schedule-module-width: calc(var(--card-module-width-1920-2160px) + var(--content-big-card-margin));
        --schedule-screen-line-num: 3;
        margin-right: var(content-right-margin-max);
        width: var(--schedule-module-width)
    }
}

@media screen and (min-width: 2161px) {
    .schedule-banner-module {
        --schedule-module-width: calc(var(--card-module-width-2160px) + var(--content-big-card-margin));
        --schedule-screen-line-num: 3;
        margin-left: var(--content-left-margin-max);
        width: var(--schedule-module-width)
    }
}

.live-mark-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    width: 50px;
    height: 20px;
    background-color: #000;
    margin-right: 8px;
    border-radius: 4px
}

.live-mark-wrap .live-tag {
    width: 16px;
    height: 16px;
    margin-left: -2px;
    margin-bottom: 1px
}

.live-mark-wrap .mark-text {
    display: inline-block;
    color: #fff
}

.live-info-wrap {
    display: flex;
    width: 100%;
    height: 88px;
    background-color: rgba(255,255,255,.06);
    margin-bottom: 16px;
    border-radius: 8px
}

@media screen and (max-width: 1440px) {
    .live-info-wrap {
        margin-bottom:12px
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .live-info-wrap {
        margin-bottom:6px
    }
}

@media screen and (min-width: 1920px) {
    .live-info-wrap {
        margin-bottom:14px
    }
}

.live-info-wrap .live-info-left {
    width: 63px;
    height: 100%;
    border-radius: 8px 0 0 8px
}

.live-info-wrap .live-info-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 63px);
    padding: 11px
}

.live-info-wrap .live-info-right .info-head {
    display: flex;
    align-items: center;
    max-width: 90%
}

.live-info-wrap .live-info-right .info-head .info-title {
    max-width: calc(100% - 58px);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.live-info-wrap .live-info-right .info-tag,.live-info-wrap .live-info-right .info-actor {
    margin-top: 7px;
    max-width: 90%;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255,255,255,.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.live-info-wrap .live-info-right .info-actor {
    margin-top: 0
}

.bullet-chat-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    scrollbar-width: none
}

.bullet-chat-wrap .bullet-scroll-wrap {
    transform: translate3d(0,-40px,0)
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-container {
    width: 100%;
    height: 32px;
    margin-bottom: 8px;
    border-radius: 16px 20px 20px 0
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-container .bullet-chat-bubble {
    color: #f2f2f2;
    display: inline-block;
    background: rgba(0,0,0,.2);
    height: 100%;
    max-width: 96%;
    border-radius: 16px 20px 20px 0;
    padding-right: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-container .bullet-chat-bubble .user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 6px
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-container .bullet-chat-bubble .bullet-chat-text {
    height: 32px;
    line-height: 32px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-container .bullet-chat-bubble .bullet-emoji {
    width: 20px;
    height: 20px;
    margin-left: 3px;
    margin-bottom: 5px
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-container .bullet-chat-bubble .bullet-punchine {
    height: 20px;
    margin-bottom: 7px
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-card-container {
    height: 28px;
    margin-bottom: 6px;
    border-radius: 16px 20px 20px 0
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-card-container .bullet-chat-bubble-card {
    border-radius: 16px 20px 20px 0;
    background: rgba(0,0,0,.4);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-card-container .bullet-chat-bubble-card .user-avatar {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: 6px
}

.bullet-chat-wrap .bullet-scroll-wrap .bullet-chat-bubble-card-container .bullet-chat-bubble-card .bullet-chat-text {
    height: 28px;
    line-height: 28px;
    font-size: 12px
}

.bullet-chat-wrap .bullet-scroll-wrap .live-bullet-hide {
    opacity: 0;
    transition: ease-out opacity .1s
}

.bullet-chat-wrap::-webkit-scrollbar {
    display: none
}

.arrow-btn {
    cursor: pointer;
    opacity: .2
}

.arrow-btn:hover {
    opacity: 1
}

.arrow-btn .intro-wrapper__icon {
    position: absolute
}

.live-series-wrap {
    --series-card-width: calc( (var(--live-module-width) - (var(--live-series-screen-line-num) - 1) * var(--content-big-card-margin)) / var(--live-series-screen-line-num) );
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 40px
}

@media screen and (max-width: 1280px) {
    .live-series-wrap {
        --live-series-screen-line-num: 5;
        margin-bottom: 30px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .live-series-wrap {
        --live-series-screen-line-num: 6
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .live-series-wrap {
        --live-series-screen-line-num: 7
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .live-series-wrap {
        --live-series-screen-line-num: 8
    }
}

@media screen and (min-width: 1921px) {
    .live-series-wrap {
        --live-series-screen-line-num: 9
    }
}

.live-series-wrap .left-arrow {
    position: absolute;
    left: -30px;
    top: calc(50% - 11.5px)
}

.live-series-wrap .right-arrow {
    position: absolute;
    right: -1px;
    top: calc(50% - 11.5px)
}

.live-series-wrap .series-card-container {
    position: relative;
    margin-right: var(--content-big-card-margin);
    border-radius: 8px;
    cursor: pointer
}

.live-series-wrap .series-card-container:nth-child(1) {
    margin-left: 2px
}

.live-series-wrap .series-card-container .series-card-pic {
    width: calc(var(--series-card-width) - .8px);
    height: var(--series-card-width);
    min-width: 136.5px;
    min-height: 136.5px;
    border-radius: 8px;
    -o-object-fit: cover;
    object-fit: cover
}

.live-series-wrap .series-card-container .series-card-info {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    left: 0%;
    right: 0%;
    bottom: 0px;
    background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%);
    border-radius: 0 0 8px 8px;
    z-index: 12
}

.live-series-wrap .series-card-container .series-card-info .title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255,255,255,.8);
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.live-series-wrap .series-card-container .series-card-info .title-text-click-active {
    color: #fff;
    font-weight: 500
}

.live-series-wrap .series-card-container .series-card-info .title-text-hover-active {
    color: #fff
}

.live-series-wrap .series-card-container .series-card-mask {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.5));
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    line-height: 20px
}

.live-series-wrap .series-card-container .series-card-mask .mask-time,.live-series-wrap .series-card-container .series-card-mask .mask-title {
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.live-series-wrap .series-card-container-active {
    position: relative
}

.live-series-wrap .series-card-container-active:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #00d1d1;
    left: 0;
    top: 0;
    border-radius: 8px;
    box-sizing: border-box;
    z-index: 16
}

.live-focus {
    width: 100%
}

.live-focus .live-focus-wrap {
    --right-bottom-height: 77px;
    --right-top-height: 158px;
    display: flex;
    width: 100%;
    height: calc((var(--live-module-width) - var(--live-focus-right-width)) * var(--card-width-height-proportion));
    min-height: 273px;
    margin-bottom: 20px;
    font-family: PingFang SC;
    border-radius: 16px;
    cursor: pointer
}

@media screen and (max-width: 1280px) {
    .live-focus .live-focus-wrap {
        --live-focus-right-width: 280px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .live-focus .live-focus-wrap {
        --live-focus-right-width: 310px
    }
}

@media screen and (min-width: 1441px) {
    .live-focus .live-focus-wrap {
        --live-focus-right-width: 340px
    }
}

.live-focus .live-focus-wrap .live-focus-video-container {
    position: relative;
    width: calc(100% - var(--live-focus-right-width));
    border-radius: 16px 0 0 16px;
    overflow: hidden;
    border: none;
    background-color: #2b2b2b
}

.live-focus .live-focus-wrap .live-focus-video-container .focus-cover {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 19;
    border-radius: 16px 0 0 16px;
    border: none
}

.live-focus .live-focus-wrap .live-focus-video-container .live-focus-player {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px 0 0 16px
}

.live-focus .live-focus-wrap .live-focus-video-container .live-focus-player div {
    border-radius: 16px 0 0 16px
}

.live-focus .live-focus-wrap .live-focus-video-container .live-focus-player video {
    border-radius: 16px 0 0 16px;
    -o-object-fit: cover!important;
    object-fit: cover!important
}

.live-focus .live-focus-wrap .live-focus-video-container .focus-volume-wrap {
    display: inline-block;
    position: absolute;
    right: 15px;
    bottom: 6px;
    z-index: 19;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.live-focus .live-focus-wrap .live-focus-right-container {
    position: relative;
    width: var(--live-focus-right-width);
    padding: 20px;
    box-sizing: border-box;
    border-radius: 0 16px 16px 0;
    background-color: #2b2b2b
}

.live-focus .live-focus-wrap .live-focus-right-container .live-head-wrap {
    margin-bottom: 16px;
    display: flex;
    align-items: center
}

.live-focus .live-focus-wrap .live-focus-right-container .live-head-wrap .avatar {
    width: 24px;
    height: 24px;
    margin-right: 10px
}

.live-focus .live-focus-wrap .live-focus-right-container .live-head-wrap .title {
    max-width: 90%;
    font-size: 24px;
    color: #fff;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.live-focus .live-focus-wrap .live-focus-right-container .live-comment-wrap {
    height: calc(100% - var(--right-top-height) - var(--right-bottom-height));
    display: flex;
    flex-direction: column-reverse
}

.live-focus .live-focus-wrap .live-focus-right-container .live-comment-wrap .bullet-chat-wrap {
    height: calc(100% - 10px)
}

@media screen and (max-width: 1180px) {
    .live-focus .live-focus-wrap .live-focus-right-container .live-comment-wrap .bullet-chat-wrap {
        display:none
    }
}

.live-focus .live-focus-wrap .live-focus-right-container .live-bottom-wrap {
    position: absolute;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    height: var(--right-bottom-height);
    width: calc(var(--live-focus-right-width) - 40px);
    margin-top: 10px
}

.live-focus .live-focus-wrap .live-focus-right-container .live-bottom-wrap .live-audience {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 17px;
    margin-bottom: 10px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: rgba(255,255,255,.6)
}

.live-focus .live-focus-wrap .live-focus-right-container .live-bottom-wrap .live-audience .audience-icon {
    height: 15px;
    width: 15px;
    opacity: .6;
    margin-bottom: 1px
}

.live-focus .live-focus-wrap .live-focus-right-container .live-bottom-wrap .live-audience .audience-text {
    margin-left: 3px
}

.live-focus .live-focus-wrap .live-focus-right-container .live-bottom-wrap .live-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    background: rgba(255,255,255,.1);
    border-radius: 100px
}

.live-focus .live-focus-wrap .live-focus-right-container .live-bottom-wrap .live-button .live-btn-text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    margin-left: 8px
}

.live-card-wrap {
    --infoHeight: 100px;
    --live-card-width: calc( (var(--live-module-width) - (var(--live-flow-screen-line-num) - 1) * var(--content-big-card-margin)) / var(--live-flow-screen-line-num) );
    position: relative;
    width: var(--live-card-width);
    height: calc(var(--live-card-width) * var(--card-width-height-proportion) + var(--infoHeight));
    min-width: 357px;
    min-height: 301px;
    border-radius: 16px;
    font-family: PingFang SC;
    font-style: normal;
    margin-bottom: var(--content-big-card-margin);
    margin-left: var(--content-big-card-margin)
}

@media screen and (max-width: 1080px) {
    .live-card-wrap {
        min-width:377px;
        min-height: 312px
    }
}

@media screen and (max-width: 1440px) {
    .live-card-wrap:nth-child(2n-1) {
        margin-left:0
    }
}

@media screen and (min-width: 1441px) {
    .live-card-wrap:nth-child(3n-2) {
        margin-left:0
    }
}

.live-card-wrap .live-card {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 14
}

.live-card-wrap .live-card .live-card-pic {
    height: 100%;
    width: 100%;
    min-width: 357px;
    min-height: 201px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 16px
}

.live-card-wrap .live-card .live-card-bullet-wrap {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 50%;
    height: 96px;
    z-index: 13
}

.live-card-wrap .volume-control-wrap {
    display: inline-block;
    position: absolute;
    right: 10px;
    bottom: calc(var(--infoHeight) + 5px);
    z-index: 15;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

.live-card-wrap .live-card-active {
    height: calc(var(--live-card-width) * var(--card-width-height-proportion))
}

@media screen and (max-width: 1080px) {
    .live-card-wrap .live-card-active {
        min-height:212px
    }
}

.live-card-wrap .live-card-active .live-card-pic-active {
    border-radius: 16px 16px 0 0
}

.live-card-wrap .live-card-bottom-mask {
    position: absolute;
    width: 100%;
    height: 180px;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.0001) 0%,rgba(0,0,0,.601919) 100%);
    border-radius: 0 0 16px 16px;
    z-index: 14
}

.live-card-wrap .live-card-bottom-mask-active {
    height: 90px;
    bottom: var(--infoHeight);
    border-radius: 0
}

.live-card-wrap .live-card-bottom-wrap {
    position: absolute;
    width: 100%;
    height: var(--infoHeight);
    bottom: 0;
    padding-right: 16px;
    padding-left: 16px;
    left: 0;
    z-index: 15;
    box-sizing: border-box;
    cursor: pointer
}

.live-card-wrap .live-card-bottom-wrap .card-title-wrap {
    display: flex;
    align-items: center;
    max-width: 80%;
    margin-top: 34px;
    margin-bottom: 3px
}

.live-card-wrap .live-card-bottom-wrap .card-title-wrap .info-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: rgba(255,255,255,.8);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.live-card-wrap .live-card-bottom-wrap .card-title-wrap-active {
    margin-top: 22px
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap {
    display: flex;
    justify-content: space-between
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap .left-info {
    width: calc(100% - 90px);
    display: flex;
    align-items: center
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap .left-info .room-name {
    max-width: 55%;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    margin-right: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap .left-info .user-count {
    display: flex;
    align-items: center;
    margin-top: 5px;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: rgba(255,255,255,.6)
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap .left-info .user-count .audience-icon {
    height: 14px;
    width: 14px;
    opacity: .6;
    margin-bottom: 1px
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap .left-info .user-count .user-text {
    margin-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap .right-button {
    margin-top: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    width: 84px;
    height: 32px;
    background-color: rgba(255,255,255,.15);
    border-radius: 36px;
    padding-right: 5px;
    padding-left: 5px
}

.live-card-wrap .live-card-bottom-wrap .card-info-wrap .right-button-active {
    margin-top: -2px
}

.live-card-flow-filter {
    width: 100%;
    display: flex;
    overflow: hidden
}

.live-card-flow-filter .live-filter-item {
    margin-right: 12px;
    background: rgba(242,242,242,.1);
    border-radius: 20px;
    padding: 7px 16px;
    text-align: center;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer
}

.live-card-flow-filter .live-filter-item .filter-text {
    color: gray;
    line-height: 18px
}

.live-card-flow-filter .live-filter-item .filter-text-active {
    color: #00b4b4;
    line-height: 18px
}

.live-card-flow-wrap {
    width: 100%;
    font-family: PingFang SC;
    font-style: normal
}

@media screen and (max-width: 1440px) {
    .live-card-flow-wrap {
        --live-flow-screen-line-num: 2
    }
}

@media screen and (min-width: 1441px) {
    .live-card-flow-wrap {
        --live-flow-screen-line-num: 3
    }
}

.live-card-flow-wrap .live-card-flow-title {
    margin-bottom: 16px;
    color: #fff;
    font-weight: 600;
    font-size: 30px;
    line-height: 42px
}

.live-card-flow-wrap .live-card-fliter-wrap {
    width: 100%;
    margin-bottom: 20px
}

.live-card-flow-wrap .live-card-list {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    overflow: hidden
}

.live-card-flow-wrap .live-card-loading {
    width: calc(100vw - var(--left-tab-width));
    display: flex;
    justify-content: center;
    padding-top: 18px;
    font-size: 16px;
    color: rgba(255,255,255,.6)
}

@media screen and (max-width: 1600px) {
    .live-card-flow-wrap .live-card-loading {
        width:var(--card-module-width-0-1600px)
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .live-card-flow-wrap .live-card-loading {
        width:var(--card-module-width-1600-1920px)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .live-card-flow-wrap .live-card-loading {
        width:var(--card-module-width-1920-2160px)
    }
}

@media screen and (min-width: 2161px) {
    .live-card-flow-wrap .live-card-loading {
        width:var(--card-module-width-2160px)
    }
}

.live-page-wrap {
    --series-border-width: 2px;
    margin-top: var(--header-height);
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    margin-right: var(content-right-margin);
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap) + 2 * var(--series-border-width));
    border-radius: 16px;
    width: var(--live-module-width)
}

.live-page-wrap img[src=""],.live-page-wrap img:not([src]) {
    opacity: 0
}

@media screen and (max-width: 1600px) {
    .live-page-wrap {
        --live-module-width: calc(var(--card-module-width-0-1600px) + 2 * var(--series-border-width))
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .live-page-wrap {
        --live-module-width: calc(var(--card-module-width-1600-1920px) + 2 * var(--series-border-width));
        margin-right: var(--content-right-margin-active)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .live-page-wrap {
        --live-module-width: calc(var(--card-module-width-1920-2160px) + 2 * var(--series-border-width));
        margin-right: var(content-right-margin-max)
    }
}

@media screen and (min-width: 2161px) {
    .live-page-wrap {
        --live-module-width: calc(var(--card-module-width-2160px) + 2 * var(--series-border-width));
        margin-left: var(--content-left-margin-max)
    }
}

.live-page-wrap .video-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 12;
    border-radius: 16px 16px 0 0;
    overflow: hidden
}

.live-page-wrap .video-container .video-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 16px 16px 0 0
}

.live-page-wrap .video-container .video-wrap video {
    -o-object-fit: cover!important;
    object-fit: cover!important
}

.mid-video-page-wrap {
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    margin-right: var(content-right-margin);
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap));
    width: var(--mid-video-page-width);
    border-radius: 16px
}

.mid-video-page-wrap img[src=""],.mid-video-page-wrap img:not([src]) {
    opacity: 0
}

@media screen and (max-width: 1600px) {
    .mid-video-page-wrap {
        --mid-video-page-width: calc(var(--card-module-width-0-1600px) + var(--content-big-card-margin))
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .mid-video-page-wrap {
        --mid-video-page-width: calc(var(--card-module-width-1600-1920px) + var(--content-big-card-margin));
        margin-right: var(--content-right-margin-active)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .mid-video-page-wrap {
        --mid-video-page-width: calc(var(--card-module-width-1920-2160px) + var(--content-big-card-margin));
        margin-right: var(content-right-margin-max)
    }
}

@media screen and (min-width: 2161px) {
    .mid-video-page-wrap {
        --mid-video-page-width: calc(var(--card-module-width-2160px) + var(--content-big-card-margin));
        margin-left: var(--content-left-margin-max)
    }
}

.mid-video-page-wrap .mid-tab-ctrl {
    position: fixed;
    display: flex;
    width: 100%;
    z-index: 19;
    min-width: 1024px;
    background-color: rgba(20,20,20,.96);
    padding-bottom: var(--content-big-card-margin);
    font-family: PingFang SC;
    font-style: normal;
    font-size: 16px
}

.mid-video-page-wrap .mid-tab-ctrl .tab-item {
    margin-right: 48px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    color: rgba(255,255,255,.6);
    cursor: pointer
}

.mid-video-page-wrap .mid-tab-ctrl .tab-item:hover {
    color: #fff
}

.mid-video-page-wrap .mid-tab-ctrl .tab-item-active {
    color: #fff;
    font-weight: 500
}

.mid-video-page-wrap .mid-tab-ctrl .tab-item-active:hover {
    color: #fff
}

.mid-video-page-wrap .mid-video-flow-wrap {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    overflow: hidden
}

.mid-video-page-wrap .mid-video-flow-wrap .video-card-wrap,.mid-video-page-wrap .mid-video-flow-wrap .card-wrap {
    position: relative;
    width: var(--flow-card-width);
    height: calc(var(--flow-card-width) * var(--card-width-height-proportion) + 100px);
    margin-bottom: var(--content-big-card-margin);
    margin-right: var(--content-big-card-margin);
    --flow-card-width: calc( (var(--mid-video-page-width) - var(--mid-flow-screen-line-num) * var(--content-big-card-margin)) / var(--mid-flow-screen-line-num) )
}

@media screen and (max-width: 1439px) {
    .mid-video-page-wrap .mid-video-flow-wrap .video-card-wrap,.mid-video-page-wrap .mid-video-flow-wrap .card-wrap {
        --mid-flow-screen-line-num: 2
    }
}

@media screen and (min-width: 1440px) {
    .mid-video-page-wrap .mid-video-flow-wrap .video-card-wrap,.mid-video-page-wrap .mid-video-flow-wrap .card-wrap {
        --mid-flow-screen-line-num: 3
    }
}

.mid-video-page-wrap .toggle-loading-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 60px;
    font-size: 16px;
    color: rgba(255,255,255,.6)
}

@media screen and (max-width: 1600px) {
    .mid-video-page-wrap .toggle-loading-wrap {
        width:var(--card-module-width-0-1600px)
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .mid-video-page-wrap .toggle-loading-wrap {
        width:var(--card-module-width-1600-1920px)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .mid-video-page-wrap .toggle-loading-wrap {
        width:var(--card-module-width-1920-2160px)
    }
}

@media screen and (min-width: 2161px) {
    .mid-video-page-wrap .toggle-loading-wrap {
        width:var(--card-module-width-2160px)
    }
}

.creative-banner[data-v-0855a8a0] {
    position: relative;
    padding: 40px 0 20px;
    cursor: pointer
}

.creative-banner .container[data-v-0855a8a0] {
    width: 100%;
    padding-right: var(--content-big-card-margin);
    display: flex;
    justify-content: center;
    align-items: center
}

.creative-banner .container .center[data-v-0855a8a0] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px
}

.creative-banner .container .center img[data-v-0855a8a0] {
    width: 100%;
    max-height: 120px
}

.creative-banner .container .center .close-button[data-v-0855a8a0] {
    width: 48px;
    height: 20px;
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 4px;
    background-color: rgba(0,0,0,.4);
    color: #fff;
    font-size: 12px;
    z-index: 20;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.creative-banner .container .center .close-button .icon[data-v-0855a8a0] {
    margin: 2px 0 0
}

.creative-banner .container .left[data-v-0855a8a0],.creative-banner .container .right[data-v-0855a8a0] {
    max-height: 120px;
    flex-grow: 1
}

.list-entry-wrap-wrap[data-v-1b8dbdf2] {
    position: relative;
    margin-top: 10px;
    margin-bottom: 35px
}

.list-entry-small-focus[data-v-1b8dbdf2] {
    margin-top: 40px
}

.left-arrow[data-v-1b8dbdf2] {
    position: absolute;
    left: -23px;
    top: 10px
}

.right-arrow[data-v-1b8dbdf2] {
    position: absolute;
    right: -1px;
    top: 10px
}

.list-entry-wrap[data-v-1b8dbdf2] {
    position: relative;
    display: flex;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    --item-gap: 12px
}

.list-entry-wrap[data-v-1b8dbdf2]::-webkit-scrollbar {
    display: none
}

@media screen and (max-width: 1280px) {
    .list-entry-wrap[data-v-1b8dbdf2] {
        --screen-line-num: 6
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .list-entry-wrap[data-v-1b8dbdf2] {
        --screen-line-num: 8
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .list-entry-wrap[data-v-1b8dbdf2] {
        --screen-line-num: 9
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .list-entry-wrap[data-v-1b8dbdf2] {
        --screen-line-num: 10
    }
}

@media screen and (min-width: 1921px) {
    .list-entry-wrap[data-v-1b8dbdf2] {
        --screen-line-num: 12
    }
}

.list-entry-wrap .list-entry-item[data-v-1b8dbdf2] {
    height: 40px;
    background: rgba(255,255,255,.1);
    border-radius: 24px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: rgba(255,255,255,.6);
    width: calc((100% - (var(--screen-line-num) - 1) * var(--item-gap)) / var(--screen-line-num));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--item-gap);
    cursor: pointer
}

.list-entry-wrap .list-entry-item[data-v-1b8dbdf2]:hover {
    color: #fff
}

.list-entry-wrap .list-entry-item[data-v-1b8dbdf2]:last-of-type {
    margin-right: 0
}

.list-entry-wrap .right-arrow[data-v-1b8dbdf2] {
    position: absolute;
    right: -25px
}

.filter-labels-wrap {
    display: flex;
    background-color: rgba(20,20,20,.96);
    padding-bottom: 12px;
    overflow: hidden;
    flex-wrap: wrap
}

.filter-labels-wrap .to-calc-style-not-show {
    background-color: red;
    visibility: hidden;
    position: absolute
}

.filter-labels-wrap .content {
    z-index: 22;
    position: relative
}

.filter-labels-wrap .content.fixed {
    position: fixed;
    background-color: rgba(20,20,20,.96);
    padding-bottom: 20px
}

.filter-labels-wrap .occupying-wrap {
    z-index: 10
}

.filter-labels-wrap .rec-structure-module-title,.filter-labels-wrap .rec-structure-module-title-actual {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 42px;
    color: #fff
}

.filter-labels-wrap .rec-structure-module-title-actual {
    position: absolute;
    left: 0;
    top: 10px
}

.filter-labels-wrap .rec-structure-module-title-actual:after {
    content: "";
    position: absolute;
    background-color: rgba(255,255,255,.5);
    width: 1px;
    height: 22px;
    right: -25px;
    top: 10px
}

.filter-labels-wrap .tab-item {
    margin-left: 40px;
    margin-top: 20px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    display: inline-block
}

.filter-labels-wrap .tab-item:hover {
    color: #fff
}

.filter-labels-wrap .tab-item:first-of-type {
    margin-left: 0
}

.filter-labels-wrap .tab-item.no-left-margin {
    margin-left: 0
}

.filter-labels-wrap .tab-item-active {
    color: #fff;
    font-weight: 500
}

.filter-labels-wrap .tab-item-active:hover {
    color: #fff
}

.filter-labels-wrap .show-more,.filter-labels-wrap .stow {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    margin-left: 40px;
    cursor: pointer;
    opacity: .6;
    display: inline-block;
    margin-top: 20px
}

.filter-labels-wrap .show-more:hover,.filter-labels-wrap .stow:hover {
    color: #fff;
    opacity: 1
}

.filter-labels-wrap .show-more.no-left2-margin,.filter-labels-wrap .stow.no-left2-margin {
    margin-left: 0
}

.filter-labels-wrap .show-more svg,.filter-labels-wrap .stow svg {
    margin-left: -3px
}

.filter-labels-wrap .no-data-err {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 10px auto
}

.filter-labels-wrap .no-data-err img {
    width: 600px;
    height: 388px
}

.filter-labels-wrap .no-data-err .tips {
    font-size: 18px;
    color: #666
}

.channel .no-data-tips {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 100px
}

.channel .no-data-tips .tips {
    font-size: 18px;
    color: #666
}

.channel .no-data-tips img {
    width: 500px
}

.channel .loading_wrapper {
    margin-top: 200px;
    margin-left: 80px;
    position: relative;
    margin-bottom: 114px;
    height: 20px;
    z-index: 999
}

@keyframes loading {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 -300px
    }
}

.channel .loading_wrapper .mod_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #333;
    font-size: 14px;
    position: absolute;
    width: 100%;
    height: 20px;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    z-index: 1000
}

.channel .loading_wrapper .mod_loading span {
    color: rgba(0,0,0,.6)
}

.channel .loading_wrapper .mod_loading i {
    display: block;
    width: 27px;
    height: 10px;
    margin: 10px 4px;
    background: url(https://puui.qpic.cn/vupload/0/20190405_1554453174750_gz7lx26exem.png/0) 0 0 no-repeat;
    background-size: 27px 300px;
    animation: loading 1s steps(30) infinite
}

.channel .video-container-wrap {
    position: absolute;
    left: 0;
    top: 0
}

.channel .video-container-wrap .video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.channel .video-container-wrap .video-container video {
    -o-object-fit: cover!important;
    object-fit: cover!important
}

.channel .card-flow-video-container {
    min-width: 357px;
    min-height: 201px;
    border-radius: 16px 16px 0 0;
    overflow: hidden
}

.channel .card-flow-video-container .video-container {
    border-radius: 16px 16px 0 0
}

.channel .banner-video-container {
    min-width: 230px;
    min-height: 128px;
    overflow: hidden
}

.channel .banner-video-container .video-container,.channel .banner-video-container .video-container div {
    border-radius: 8px
}

.channel .banner-video-container .video-container video {
    border-radius: 8px
}

.channel .layer-banner-video-container {
    min-width: 216px;
    min-height: 121.5px;
    overflow: hidden
}

.channel .layer-banner-video-container .video-container,.channel .layer-banner-video-container .video-container div {
    border-radius: 8px 8px 0 0
}

.channel .layer-banner-video-container .video-container video {
    border-radius: 8px 8px 0 0
}

.channel .general-banner-adapt {
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap) - 40px)
}

@media screen and (max-width: 1600px) {
    .channel .general-banner-adapt {
        width:var(--card-module-width-0-1600px);
        margin-right: 40px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .channel .general-banner-adapt {
        width:var(--card-module-width-1600-1920px);
        margin-right: calc(40px + (100vw - 1600px)/16)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .channel .general-banner-adapt {
        width:var(--card-module-width-1920-2160px);
        margin-right: 60px
    }
}

@media screen and (min-width: 2161px) {
    .channel .general-banner-adapt {
        margin-left:calc((100vw - var(--left-tab-width) - 1800px - var(--content-big-card-margin) * 2) / 2 - 15px);
        width: var(--card-module-width-2160px)
    }
}

@media screen and (min-width: 2161px) {
    .channel .general-banner-adapt {
        margin-left:var(--content-left-margin-max)
    }
}

.top-nav-wrap[data-v-063bf321] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 84px;
    z-index: 100;
    display: flex;
    background-image: linear-gradient(0deg,rgba(20,20,20,0) 1%,rgba(20,20,20,.7) 99%)
}

.top-nav-wrap .right .mod_search[data-v-063bf321] {
    top: 18px;
    height: 48px;
    right: 50%;
    transform: translate(50%);
    background: rgba(255,255,255,.1);
    border-radius: 36px;
    border: none
}

.top-nav-wrap .right .mod_search:hover .search_form .search-btn-wrap[data-v-063bf321] {
    padding-left: 35px
}

@media screen and (max-width: 660px) {
    .top-nav-wrap .right .mod_search:hover .search_form .search-btn-wrap[data-v-063bf321] {
        padding-left:20px
    }
}

.top-nav-wrap .right .mod_search:hover .search_form .search-btn-wrap .simple-style[data-v-063bf321] {
    display: none
}

.top-nav-wrap .right .mod_search:hover .search_form .search-btn-wrap .whole-style[data-v-063bf321] {
    display: flex
}

.top-nav-wrap .right .mod_search:hover .search_form .rank-icon-wrap[data-v-063bf321] {
    display: block
}

@media screen and (max-width: 660px) {
    .top-nav-wrap .right .mod_search:hover .search_form .rank-icon-wrap[data-v-063bf321] {
        right:81px
    }
}

.top-nav-wrap .right .mod_search:hover .search_input[data-v-063bf321] {
    color: #fff
}

.top-nav-wrap .right .mod_search .search_form[data-v-063bf321] {
    display: flex
}

.top-nav-wrap .right .mod_search .search_form .search_keywords[data-v-063bf321] {
    flex: 1;
    margin-left: 25px;
    margin-right: 0
}

@media screen and (max-width: 660px) {
    .top-nav-wrap .right .mod_search .search_form .search_keywords[data-v-063bf321] {
        margin-left:10px
    }
}

.top-nav-wrap .right .mod_search .search_form .search-btn-wrap[data-v-063bf321] {
    background: none;
    height: 100%;
    padding-left: 20px
}

.top-nav-wrap .right .mod_search .search_form .search-btn-wrap .simple-style[data-v-063bf321] {
    width: auto;
    margin-right: 25px;
    opacity: .6
}

.top-nav-wrap .right .mod_search .search_form .search-btn-wrap .whole-style[data-v-063bf321] {
    display: none;
    align-items: center;
    height: 100%
}

.top-nav-wrap .right .mod_search .search_form .search-btn-wrap .whole-style .icon-text-wrap[data-v-063bf321] {
    display: flex;
    height: 100%;
    background: rgba(255,255,255,.05);
    align-items: center;
    padding-right: 25px;
    padding-left: 10px;
    border-radius: 0 30px 30px 0
}

@media screen and (max-width: 660px) {
    .top-nav-wrap .right .mod_search .search_form .search-btn-wrap .whole-style .icon-text-wrap[data-v-063bf321] {
        padding-right:8px;
        padding-left: 3px
    }
}

.top-nav-wrap .right .mod_search .search_form .search-btn-wrap .whole-style .icon-text-wrap .btn_inner[data-v-063bf321] {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #fff
}

@media screen and (max-width: 660px) {
    .top-nav-wrap .right .mod_search .search_form .search-btn-wrap .whole-style .icon-text-wrap .btn_inner[data-v-063bf321] {
        font-size:14px
    }
}

.top-nav-wrap .right .mod_search .search_form .rank-icon-wrap[data-v-063bf321] {
    position: absolute;
    right: 115px;
    margin-top: 11px;
    display: none
}

@media screen and (max-width: 660px) {
    .top-nav-wrap .right .mod_search[data-v-063bf321] {
        width:138px
    }
}

@media screen and (min-width: 1025px) and (max-width: 1290px) {
    .top-nav-wrap .right .mod_search[data-v-063bf321] {
        width:373px
    }
}

@media screen and (min-width: 1280px) and (max-width: 1910px) {
    .top-nav-wrap .right .mod_search[data-v-063bf321] {
        width:480px
    }
}

@media screen and (min-width: 1920px) {
    .top-nav-wrap .right .mod_search[data-v-063bf321] {
        width:480px
    }
}

.top-nav-wrap .right .mod_search .search_input[data-v-063bf321] {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: rgba(255,255,255,.6);
    line-height: 32px;
    letter-spacing: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.small-focus .top-nav-wrap[data-v-063bf321],.top-nav-wrap-black[data-v-063bf321] {
    background-color: rgba(20,20,20,.96)
}

.top-nav-has-red[data-v-063bf321] {
    top: var(--top-red-banner-height);
    left: var(--top-red-banner-side-margin);
    width: calc(100vw - 2 * var(--top-red-banner-side-margin))
}

.top-red-banner[data-v-6085a711] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--top-red-banner-height);
    z-index: 999
}

.top-red-banner .top-red-link[data-v-6085a711] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.top-red-banner .top-red-link .red-img[data-v-6085a711] {
    height: var(--top-red-banner-height)
}

.top-red-banner .top-red-side[data-v-6085a711] {
    position: absolute;
    height: 100vh;
    width: var(--top-red-banner-side-margin);
    top: var(--top-red-banner-height)
}

.top-red-banner .left-side[data-v-6085a711] {
    left: 0
}

.top-red-banner .right-side[data-v-6085a711] {
    right: 0
}

.left-nav-bubble[data-v-e2cbf476] {
    position: absolute;
    top: 125px;
    left: 185px;
    width: 316px;
    padding: 12px 16px 36px;
    background-color: rgba(0,0,0,.8);
    border-radius: 16px;
    justify-content: flex-start;
    box-sizing: border-box;
    direction: ltr
}

.left-nav-bubble .bubble-head[data-v-e2cbf476] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-content: center
}

.left-nav-bubble .bubble-head .text-wrap .hot-text[data-v-e2cbf476] {
    color: #fff;
    font-size: 17px;
    line-height: 28px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.left-nav-bubble .bubble-head .close-btn[data-v-e2cbf476] {
    display: flex;
    opacity: .6;
    height: 30px;
    padding: 1px 0 0 5px;
    box-sizing: border-box
}

.left-nav-bubble .bubble-content[data-v-e2cbf476] {
    display: flex
}

.left-nav-bubble .bubble-content .live-card-item[data-v-e2cbf476] {
    height: 80px;
    width: 59px;
    margin-right: 16px
}

.left-nav-bubble .bubble-content .live-card-item .cover[data-v-e2cbf476] {
    display: block;
    height: 80px;
    width: 59px;
    border-radius: 4px
}

.left-nav-bubble .bubble-content .live-card-item .title[data-v-e2cbf476] {
    display: block;
    width: 100%;
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    color: rgba(255,255,255,.8);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 5px
}

.left-nav-bubble[data-v-e2cbf476]:before,.left-nav-bubble[data-v-e2cbf476]:after {
    position: absolute;
    top: 18px;
    left: -16px;
    content: "";
    width: 0;
    height: 0;
    border-right: 9px solid rgba(0,0,0,.6);
    border-bottom: 9px solid transparent;
    border-left: 9px solid transparent;
    border-top: 9px solid transparent
}

.nav-item-wrap {
    display: flex;
    align-items: center
}

.left-nav-wrap {
    width: 180px;
    height: 100vh;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0px;
    background-image: linear-gradient(-90deg,rgba(20,20,20,0) 1%,rgba(20,20,20,.6) 99%)
}

.left-nav-wrap.let-nav-wrap-black {
    background-color: rgba(20,20,20,.96)
}

.left-nav-wrap .logo-wrap {
    height: 84px
}

.left-nav-wrap .logo-wrap .logo-link {
    display: inline-block;
    width: 158px;
    height: 40px;
    text-indent: -300px;
    margin-left: 24px;
    margin-top: 26px;
    position: relative
}

.left-nav-wrap .logo-wrap .logo-link svg {
    position: absolute;
    left: 0;
    top: 0
}

.left-nav-wrap .nav-wrap {
    overscroll-behavior: none;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 120px);
    direction: rtl;
    scrollbar-color: rgba(255,255,255,.4) transparent;
    scrollbar-width: thin;
    -ms-overflow-style: none
}

.left-nav-wrap .nav-wrap .group-title {
    margin-top: 16px
}

.left-nav-wrap .nav-wrap .group-title .title {
    margin-left: 42px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #e6e9f0;
    opacity: .6
}

.left-nav-wrap .nav-wrap:hover::-webkit-scrollbar {
    width: 6px;
    border-radius: 3px;
    display: block
}

.left-nav-wrap .nav-wrap::-webkit-scrollbar {
    width: 6px;
    border-radius: 3px;
    display: none
}

.left-nav-wrap .nav-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.4);
    border-radius: 3px
}

.left-nav-wrap .nav-wrap::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 3px
}

.left-nav-wrap .nav-wrap .router-click-active .icon {
    opacity: 1!important
}

.left-nav-wrap .nav-wrap .router-click-active .text,.left-nav-wrap .nav-wrap .router-click-active .text .nav-new-tag,.left-nav-wrap .nav-wrap .router-click-active .nav-item {
    color: #00d1d1!important
}

.left-nav-wrap .nav-wrap .router-click-active svg {
    opacity: 1!important
}

.left-nav-wrap .nav-wrap .nav-item {
    width: 160px;
    height: 48px;
    border-radius: 9px;
    margin-right: 20px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 32px;
    display: flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    align-items: center
}

.left-nav-wrap .nav-wrap .nav-item.active .text {
    color: #fff
}

.left-nav-wrap .nav-wrap .nav-item.active .text .nav-new-tag {
    color: #00d1d1
}

.left-nav-wrap .nav-wrap .nav-item.active .icon {
    opacity: 1
}

.left-nav-wrap .nav-wrap .nav-item .icon {
    height: 20px;
    margin-left: 42px;
    margin-bottom: 2px;
    opacity: .6;
    color: #fff;
    width: 20px;
    position: relative;
    flex-shrink: 0
}

.left-nav-wrap .nav-wrap .nav-item .icon.select {
    color: #00d1d1
}

.left-nav-wrap .nav-wrap .nav-item .icon img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0
}

.left-nav-wrap .nav-wrap .nav-item .text {
    position: relative;
    margin-left: 15px;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    display: flex;
    flex-direction: row-reverse;
    align-items: center
}

.left-nav-wrap .nav-wrap .nav-item .text .nav-new-tag {
    position: absolute;
    right: -26px;
    top: 4px;
    font-weight: 800;
    font-size: 12px;
    line-height: 12px;
    transform: scaleX(.65);
    color: rgba(0,209,209,.9)
}

.left-nav-wrap .nav-wrap .nav-item .text .pic-tag {
    position: absolute;
    right: -23px;
    top: 4px;
    height: 10px;
    max-width: 30px
}

.left-nav-wrap .nav-wrap .nav-item .text .mark-label {
    font-family: PingFang SC,system-ui;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    margin-left: 6px;
    background: #FF5959;
    border-radius: 8px;
    padding: 2px 4px
}

.left-nav-wrap img[src=""],.left-nav-wrap img:not([src]) {
    opacity: 0
}

.left-nav-has-red {
    top: var(--top-red-banner-height);
    left: var(--top-red-banner-side-margin)
}

.left-nav-has-red .nav-wrap {
    height: calc(100vh - 3 * var(--top-red-banner-height))
}

.filter-radio-wrap {
    display: flex;
    padding-left: 76px;
    padding-right: 24px;
    flex-wrap: wrap;
    position: relative
}

.filter-radio-wrap:first-of-type {
    padding-top: 15px
}

.filter-radio-wrap:last-of-type:before {
    content: "";
    height: 1px;
    background-color: rgba(255,255,255,.1);
    width: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.filter-radio-wrap:last-of-type .item {
    margin-top: 15px;
    background: rgba(255,255,255,.1);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px
}

.filter-radio-wrap .item {
    white-space: pre;
    margin-top: 5px;
    margin-bottom: 15px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: rgba(255,255,255,.6);
    margin-right: 20px;
    cursor: pointer
}

.filter-radio-wrap .item.active,.filter-radio-wrap .item.active:hover {
    color: #00d1d1
}

.filter-radio-wrap .item:hover {
    color: #fff
}

.filter-radio-wrap .item:first-of-type {
    margin-left: -76px
}

.card-list-wrap {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

@media screen and (max-width: 1280px) {
    .card-list-wrap {
        --vertical-cards-num: 4;
        --horizontal-cards-num: 3
    }

    .card-list-wrap .card.vertical:nth-child(4n+1) {
        margin-left: 0
    }

    .card-list-wrap .card.horizontal:nth-child(3n+1) {
        margin-left: 0
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .card-list-wrap {
        --vertical-cards-num: 5
    }

    .card-list-wrap .card.vertical:nth-child(5n+1) {
        margin-left: 0
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .card-list-wrap {
        --vertical-cards-num: 6
    }

    .card-list-wrap .card.vertical:nth-child(6n+1) {
        margin-left: 0
    }
}

@media screen and (min-width: 1281px) and (max-width: 1600px) {
    .card-list-wrap {
        --horizontal-cards-num: 4
    }

    .card-list-wrap .card.horizontal:nth-child(4n+1) {
        margin-left: 0
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .card-list-wrap {
        --vertical-cards-num: 7;
        --horizontal-cards-num: 5
    }

    .card-list-wrap .card.vertical:nth-child(7n+1) {
        margin-left: 0
    }

    .card-list-wrap .card.horizontal:nth-child(5n+1) {
        margin-left: 0
    }
}

@media screen and (min-width: 1921px) {
    .card-list-wrap {
        --vertical-cards-num: 8;
        --horizontal-cards-num: 6
    }

    .card-list-wrap .card.vertical:nth-child(8n+1) {
        margin-left: 0
    }

    .card-list-wrap .card.horizontal:nth-child(6n+1) {
        margin-left: 0
    }
}

.card-list-wrap .card {
    margin-left: 24px;
    margin-bottom: 40px
}

.card-list-wrap .card img[src=""],.card-list-wrap .card img:not([src]) {
    opacity: 0
}

.card-list-wrap .card .img-wrap {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    position: relative
}

@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm) {
    .card-list-wrap .card .img-wrap .subscript {
        -webkit-clip-path:inset(.5px);
        clip-path: inset(.5px)
    }
}

.card-list-wrap .card .img-wrap .subscript {
    width: 37px;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.card-list-wrap .card .img-wrap .poster-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.card-list-wrap .card .img-wrap .bottom {
    height: 48px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(360deg,rgba(0,0,0,.399257) 2.29%,rgba(0,0,0,.0001) 99.71%)
}

.card-list-wrap .card .img-wrap .bottom .right-bottom-text {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    text-align: right;
    color: #fff;
    text-shadow: 0px 0px 3px rgba(0,0,0,.404032)
}

.card-list-wrap .card.vertical {
    width: calc((100% - (var(--vertical-cards-num) - 1) * 24px) / var(--vertical-cards-num))
}

.card-list-wrap .card.vertical .img-wrap {
    padding-top: 139.5238095238%
}

.card-list-wrap .card.vertical .info-wrap .title,.card-list-wrap .card.vertical .info-wrap .sub-title {
    text-align: center
}

.card-list-wrap .card.horizontal {
    width: calc((100% - (var(--horizontal-cards-num) - 1) * 24px) / var(--horizontal-cards-num))
}

.card-list-wrap .card.horizontal .img-wrap {
    padding-top: 56.3876651982%
}

.card-list-wrap .card.horizontal .info-wrap .title,.card-list-wrap .card.horizontal .info-wrap .sub-title {
    text-align: left
}

.card-list-wrap .card .info-wrap {
    margin-top: 10px;
    text-align: center
}

.card-list-wrap .card .info-wrap .title {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.card-list-wrap .card .info-wrap .sub-title {
    color: rgba(255,255,255,.4);
    mix-blend-mode: normal;
    margin-top: 4px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.card-list-wrap.is-need-hidden-time .card .img-wrap .bottom .right-bottom-text {
    display: none
}

.list-page-wrap {
    overflow-y: auto;
    position: fixed;
    left: var(--left-tab-width);
    top: var(--header-height);
    background-color: #141414;
    z-index: 50;
    width: calc(100vw - var(--left-tab-width));
    min-width: calc(1024px - var(--left-tab-width));
    height: calc(100vh - var(--header-height))
}

.list-page-wrap::-webkit-scrollbar {
    width: 6px;
    border-radius: 3px
}

.list-page-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.4);
    border-radius: 3px
}

.list-page-wrap::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 3px
}

.list-page-wrap .kinds-list-wrap {
    position: fixed;
    top: calc(var(--header-height));
    left: calc(var(--left-tab-width));
    background-color: rgba(20,20,20,.96);
    width: calc(100vw - var(--left-tab-width));
    min-width: calc(1024px - var(--left-tab-width));
    z-index: 10
}

.list-page-wrap .kinds-list-wrap .kinds-list-content {
    position: relative;
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap) - 40px);
    margin-left: calc(var(--tab-content-gap))
}

@media screen and (max-width: 1600px) {
    .list-page-wrap .kinds-list-wrap .kinds-list-content {
        width:var(--card-module-width-0-1600px);
        margin-right: 40px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .list-page-wrap .kinds-list-wrap .kinds-list-content {
        width:var(--card-module-width-1600-1920px);
        margin-right: calc(40px + (100vw - 1600px)/16)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .list-page-wrap .kinds-list-wrap .kinds-list-content {
        width:var(--card-module-width-1920-2160px);
        margin-right: 60px
    }
}

@media screen and (min-width: 2161px) {
    .list-page-wrap .kinds-list-wrap .kinds-list-content {
        margin-left:calc((100vw - var(--left-tab-width) - 1800px - var(--content-big-card-margin) * 2) / 2 - 15px);
        width: var(--card-module-width-2160px)
    }
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .back-btn-wrap {
    position: absolute;
    left: 0;
    top: 10px;
    display: flex;
    align-items: center
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .back-btn-wrap .btn {
    display: flex;
    align-items: center
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .back-btn-wrap .btn:hover .intro-wrapper__icon,.list-page-wrap .kinds-list-wrap .kinds-list-content .back-btn-wrap .btn:hover .text {
    opacity: 1;
    color: #fff
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .back-btn-wrap .btn .intro-wrapper__icon {
    opacity: .6;
    cursor: pointer
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .back-btn-wrap .btn .text {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: rgba(255,255,255,.6);
    cursor: pointer
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .back-btn-wrap .vertical-line {
    height: 16px;
    width: 1px;
    background-color: rgba(255,255,255,.6);
    margin-left: 20px
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .kinds-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 42px
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .kinds-list .item {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 42px;
    text-align: center;
    margin-right: 30px;
    cursor: pointer;
    color: rgba(255,255,255,.6)
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .kinds-list .item:hover {
    color: #fff
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .kinds-list .item:first-of-type {
    margin-left: 120px
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .kinds-list .item.active,.list-page-wrap .kinds-list-wrap .kinds-list-content .kinds-list .item.active:hover {
    color: #00d1d1
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .abbreviat-filters {
    cursor: pointer;
    width: 100%;
    display: flex;
    border-radius: 8px
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .abbreviat-filters .abbreviat-item {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 48px;
    text-align: center;
    color: #00d1d1;
    margin-right: 20px
}

.list-page-wrap .kinds-list-wrap .kinds-list-content .abbreviat-filters .abbreviat-item:first-of-type {
    margin-left: 2px
}

.list-page-wrap .list-page-content {
    margin-top: 32px;
    margin-left: calc(var(--left-tab-width) + var(--tab-content-gap));
    min-width: calc(1024px - var(--left-tab-width) - var(--tab-content-gap) - 40px);
    margin-left: calc(var(--tab-content-gap))
}

@media screen and (max-width: 1600px) {
    .list-page-wrap .list-page-content {
        width:var(--card-module-width-0-1600px);
        margin-right: 40px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .list-page-wrap .list-page-content {
        width:var(--card-module-width-1600-1920px);
        margin-right: calc(40px + (100vw - 1600px)/16)
    }
}

@media screen and (min-width: 1921px) and (max-width: 2160px) {
    .list-page-wrap .list-page-content {
        width:var(--card-module-width-1920-2160px);
        margin-right: 60px
    }
}

@media screen and (min-width: 2161px) {
    .list-page-wrap .list-page-content {
        margin-left:calc((100vw - var(--left-tab-width) - 1800px - var(--content-big-card-margin) * 2) / 2 - 15px);
        width: var(--card-module-width-2160px)
    }
}

.list-page-wrap .filter-area {
    border-radius: 8px;
    overflow: hidden
}

.list-page-wrap .empty-tip-wrap {
    display: flex;
    flex-direction: column;
    align-items: center
}

.list-page-wrap .empty-tip-wrap .tip-img {
    width: 150px
}

.list-page-wrap .empty-tip-wrap .text {
    font-size: 15px
}

* {
    margin: 0;
    padding: 0
}

body,button,input,select,textarea {
    font: 12px/1.5 numFont,PingFangSC-Regular,Tahoma,Microsoft Yahei,sans-serif,helvetica,Segoe UI;
    _font-size: 62.5%
}

a {
    text-decoration: none;
    cursor: pointer
}

b,cite,code,em,i,small,th {
    font-size: 1em;
    font-style: normal;
    font-weight: 500
}

button,input,select,textarea {
    box-sizing: content-box;
    outline: 0 none;
    font-size: 1em
}

button,input[type=button],input[type=submit] {
    border: 0;
    background-color: transparent;
    cursor: pointer
}

button::-moz-focus-inner,button::-moz-focus-outer,input::-moz-focus-inner,input::-moz-focus-outer {
    margin: 0;
    padding: 0;
    border: 0
}

q:after,q:before {
    content: ""
}

.cf:after,.cf:before {
    display: table;
    content: ""
}

.cf:after {
    clear: both
}

.cf {
    *zoom: 1}

a:active,a:hover {
    color: #ff5c38
}

.none {
    display: none!important
}

.hidden {
    visibility: hidden
}

.hl {
    color: #ff5c38
}

.page_channel_choice .head_atmosphere_wrap.site_head_sticky .mod_quick .quick_link,.page_channel_choice .head_atmosphere_wrap.site_head_sticky .mod_search .search_input {
    color: #fff
}

.mod_search {
    position: absolute;
    top: 14px;
    right: 375px;
    width: 428px;
    height: 38px;
    border: 1px solid #ff5c38;
    border-radius: 20px
}

.mod_search .search_form {
    position: relative;
    width: 100%;
    height: 100%
}

.mod_search .search_label {
    clip: rect(1px,1px,1px,1px);
    position: absolute
}

.mod_search .search_keywords {
    position: relative;
    height: 100%;
    margin: 0 164px 0 20px
}

.mod_search .search_input {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
    color: #999;
    font-size: 15px;
    line-height: 40px
}

.mod_search .search_input:focus {
    color: #111
}

.mod_search .search_input::-webkit-search-cancel-button {
    display: none
}

.mod_search .search_input::-webkit-input-placeholder {
    color: inherit
}

.mod_search .search_input:focus::-webkit-input-placeholder {
    opacity: 0
}

.mod_search .svg_icon_search {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: -4px
}

.mod_search .search_btn {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    width: 90px;
    height: 40px;
    padding-right: 6px;
    border: none;
    border-radius: 0 20px 20px 0;
    outline: 0;
    background: #ff5c38;
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    cursor: pointer
}

.mod_search .search_btn .btn_inner {
    padding-right: 2px
}

.mod_search .search_btn:hover {
    background: #ff183e
}

.mod_search .btn_search_hot {
    position: absolute;
    top: 10px;
    right: 106px;
    padding-left: 16px;
    color: #ff5c38;
    font-size: 13px
}

.mod_search .btn_search_hot .svg_icon_fire {
    position: absolute;
    top: 1px;
    left: 0;
    width: 12px;
    height: 15px
}

.mod_smartbox {
    z-index: 10;
    position: absolute;
    width: 100%;
    border-radius: 4px;
    background: #fff;
    background: rgba(255,255,255,.98);
    box-shadow: 0 28px 50px rgba(25,24,40,.35)
}

.mod_smartbox .sb_head {
    position: relative;
    margin: 10px 10px 5px;
    overflow: hidden;
    color: #999;
    font-size: 14px
}

.mod_smartbox .sb_del,.mod_smartbox .sb_more {
    color: #999
}

.mod_smartbox .sb_del:hover,.mod_smartbox .sb_more:hover {
    color: #111
}

.mod_smartbox .sb_sub {
    color: #999
}

.mod_smartbox .sb_tools {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    white-space: nowrap
}

.mod_smartbox .sb_tools .icon_sm,.mod_smartbox .sb_tools .iconfont {
    display: none;
    visibility: hidden
}

.mod_smartbox .none {
    display: none
}

.sb_history .sb_body {
    margin: 0 5px;
    overflow: hidden
}

.sb_history .sb_item {
    width: 50%;
    float: left
}

.sb_history .sb_item a {
    display: block;
    margin: 4px;
    padding: 0 10px;
    overflow: hidden;
    border-radius: 2px;
    background-color: #f8f8f8;
    color: #111;
    line-height: 32px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sb_history .current a {
    background-color: #eee;
    color: #111
}

.sb_hot {
    padding-bottom: 10px
}

.sb_hot .sb_item {
    display: block;
    margin: 0 5px
}

.sb_hot .sb_item a {
    display: block;
    padding: 5px;
    overflow: hidden;
    border-radius: 2px;
    color: #111;
    font-size: 14px;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sb_hot .sb_item a:hover {
    background-color: #eee
}

.sb_hot .sb_num {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 4px;
    border-radius: 2px;
    background-color: #7f7f8c;
    color: #fff;
    font-size: 12px;
    text-align: center;
    vertical-align: top
}

.sb_hot .sb_item_1 .sb_num {
    background-color: #ff183e
}

.sb_hot .sb_item_2 .sb_num {
    background-color: #ff5c38
}

.sb_hot .sb_item_3 .sb_num {
    background-color: #ffb821
}

.sb_hot .sb_name {
    display: inline-block;
    max-width: 80%;
    margin-left: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap
}

.sb_hot .icon_exclusive_s {
    margin-left: 4px
}

.sb_suggest {
    min-height: 20px;
    padding: 5px 0
}

.sb_suggest .sb_item {
    position: relative;
    margin: 0 5px
}

.sb_suggest .sb_title {
    display: block;
    padding: 14px 10px
}

.sb_suggest .sb_hl {
    color: #111
}

.sb_suggest .c_txt3 {
    font-style: normal
}

.sb_suggest .current {
    border-radius: 2px;
    background-color: #eee
}

.sb_suggest .current .sb_richbox,.sb_suggest .expand .sb_richbox {
    display: block
}

.sb_suggest .sb_item_rich.current .sb_title,.sb_suggest .sb_item_rich.expand .sb_title {
    padding: 2px 10px 4px
}

.sb_richbox {
    display: none;
    height: 46px;
    margin-top: 0;
    padding-bottom: 5px
}

.sb_richbox .sb_link {
    display: block;
    position: absolute;
    left: 10px;
    width: 82px;
    height: 46px
}

.sb_richbox .sb_pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 82px;
    height: 46px;
    border-radius: 4px
}

.sb_richbox .mark_v {
    top: 0;
    right: 0
}

.sb_richbox .mark_v img {
    vertical-align: top
}

.sb_richbox .mark_v_pic {
    position: absolute;
    top: 0;
    right: 0;
    height: 16px
}

.sb_richbox .sb_desc {
    display: block;
    padding-left: 102px;
    overflow: hidden;
    color: #999;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default
}

.sb_richbox .sb_list {
    display: block;
    position: relative;
    margin: 0 10px 4px 100px;
    padding: 0 6px;
    border-radius: 2px;
    background-color: #f8f8f8;
    color: #999;
    line-height: 21px
}

.sb_richbox .sb_list:hover {
    background-color: #fff;
    color: #666
}

.sb_richbox .sb_inner {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sb_richbox .sb_list .mark_v {
    top: -3px;
    right: -3px
}

.sb_richbox .sb_btn {
    display: inline-block;
    position: absolute;
    bottom: 6px;
    left: 102px;
    padding: 0 15px;
    border-radius: 12px;
    background: linear-gradient(90deg,#ffb821 0,#ff5c38 45%,#ff1459);
    background-color: #ff183e;
    color: #fff;
    line-height: 24px;
    white-space: nowrap
}

.sb_richbox .sb_btn:hover {
    background: linear-gradient(90deg,#ff9a00 3%,#ff4c24 50%,#ff004b);
    background-color: #ff183e;
    color: #fff
}

.sb_fold_sign {
    display: none
}

@media (max-width: 1789px) {
    .site_head .head_inner {
        width:1500px
    }

    .site_channel .channel_nav {
        margin-right: 18px
    }

    .mod_search {
        right: 335px;
        width: 320px
    }

    .mod_search .search_input {
        font-size: 13px
    }

    .mod_quick .quick_item {
        margin: 0 7px
    }

    .site_head_nav .site_head_nav_inner {
        width: 1500px
    }

    .site_head_nav .nav_area {
        margin-right: 0
    }

    .site_head_nav .nav_cell {
        width: 110px
    }

    .site_subnav .site_subnav_inner {
        width: 1335px
    }

    .site_subnav .nav_link_15,.site_subnav .nav_link_16 {
        display: none
    }

    .site_head_absolute .mod_search {
        width: 400px;
        margin-left: -200px
    }
}

@media (max-width: 1549px) {
    .site_head .head_inner {
        width:1200px
    }

    .site_channel .channel_nav {
        margin-right: 12px
    }

    .site_channel .channel_nav_8,.site_channel .channel_nav_9 {
        display: none
    }

    .site_channel .current {
        display: inline-block
    }

    .page_channel_music .channel_nav_7,.page_channel_sports .channel_nav_7 {
        display: none
    }

    .mod_search {
        right: 285px;
        width: 320px
    }

    .mod_search .search_input {
        font-size: 13px
    }

    .mod_quick .quick_item {
        margin: 0 6px
    }

    .site_head_nav .site_head_nav_inner {
        width: 1200px
    }

    .site_head_nav .nav_area {
        margin-right: 0
    }

    .site_head_nav .nav_cell {
        width: 100px
    }

    .site_subnav .site_subnav_inner {
        width: 1035px
    }

    .site_subnav .nav_link_12,.site_subnav .nav_link_13,.site_subnav .nav_link_14,.site_subnav .nav_link_15,.site_subnav .nav_link_16 {
        display: none
    }

    .site_head_absolute .mod_search {
        width: 380px;
        margin-left: -160px
    }

    .site_head .unusual_pic {
        display: none
    }
}

@media (max-width: 1280px) {
    .site_head .head_inner {
        width:990px
    }

    .mod_quick .quick_vip {
        display: none
    }

    .site_channel {
        margin-left: 25px
    }

    .site_channel .channel_nav {
        margin-right: 9px
    }

    .site_channel .channel_nav_6,.site_channel .channel_nav_7,.site_channel .channel_nav_8,.site_channel .channel_nav_9 {
        display: none
    }

    .site_channel .current {
        display: inline-block;
        padding-left: 0
    }

    .site_channel .channel_nav_icon {
        display: none
    }

    .site_head_channel .site_channel .current {
        padding-left: 0
    }

    .mod_search {
        right: 200px;
        width: 255px
    }

    .mod_search .search_btn {
        width: 84px;
        padding-right: 0
    }

    .mod_search .search_input {
        font-size: 13px
    }

    .mod_search .search_keywords {
        margin-right: 142px;
        margin-left: 15px
    }

    .mod_search .btn_search_hot {
        top: 10px;
        right: 86px;
        padding-left: 14px
    }

    .mod_quick {
        right: 10px
    }

    .mod_quick .quick_item {
        margin: 0 5px
    }

    .mod_pop_user {
        right: 0
    }

    .site_head_nav .site_head_nav_inner {
        width: 990px
    }

    .site_head_nav .nav_area {
        margin-right: 0
    }

    .site_head_nav .nav_cell {
        width: 84px
    }

    .site_subnav .site_subnav_inner {
        width: 825px
    }

    .site_subnav .nav_link_10,.site_subnav .nav_link_11,.site_subnav .nav_link_12,.site_subnav .nav_link_13,.site_subnav .nav_link_14,.site_subnav .nav_link_15,.site_subnav .nav_link_16,.site_subnav .nav_link_9 {
        display: none
    }

    .site_head_absolute .mod_search {
        width: 360px;
        margin-left: -180px
    }

    .site_head .unusual_pic {
        display: none
    }
}

@media (max-width: 1279px) and (min-width: 1160px) {
    .mod_search {
        right:220px;
        width: 310px
    }

    .mod_search .btn_search_hot {
        right: 86px
    }
}

@media screen and (min-width: 1400px) and (max-width: 1549px) {
    .mod_search {
        right:325px
    }
}

.site_head {
    color: rgba(230,233,240,.45)
}

.site_logo .link_logo {
    background-position: 0 0
}

.site_channel .channel_nav,.site_channel .channel_more {
    color: #e6e9f0
}

.mod_search .search_input {
    color: rgba(230,233,240,.45)
}

.mod_search .search_input:focus {
    color: #e6e9f0
}

.mod_smartbox {
    background-color: #232331
}

.mod_smartbox .sb_del,.mod_smartbox .sb_head,.mod_smartbox .sb_more {
    color: rgba(230,233,240,.45)
}

.mod_smartbox .sb_del:hover,.mod_smartbox .sb_more:hover {
    color: #e6e9f0
}

.mod_smartbox .sb_sub {
    color: rgba(230,233,240,.45)
}

.sb_history .sb_item a {
    background-color: rgba(255,255,255,.08);
    color: #e6e9f0
}

.sb_history .sb_item a:hover {
    background-color: rgba(255,255,255,.16)
}

.sb_history .current a {
    background-color: rgba(255,255,255,.16);
    color: #e6e9f0
}

.sb_hot .sb_item a {
    color: #e6e9f0
}

.sb_hot .sb_item a:hover {
    background-color: rgba(255,255,255,.08)
}

.sb_suggest .sb_hl {
    color: #e6e9f0
}

.sb_suggest .current {
    background-color: rgba(255,255,255,.16)
}

.sb_suggest .sb_title,.sb_richbox .sb_desc,.sb_richbox .sb_list {
    color: rgba(230,233,240,.45)
}

.sb_richbox .sb_list {
    background-color: rgba(255,255,255,.08)
}

.sb_richbox .sb_list:hover {
    background-color: rgba(255,255,255,.16);
    color: #e6e9f0
}

body .x_fixed_tool {
    background-color: #232331
}

body .x_fixed_tool .ft_cell {
    color: rgba(230,233,240,.45)
}

body .x_fixed_tool .ft_cell_pop {
    background: #232331
}

body .x_fixed_tool .ft_general_content .ft_link {
    color: #999
}

body .x_fixed_tool .ft_cell_pop .triangle_right {
    border-left-color: #232331
}

body .x_fixed_tool .ft_cell_pop .ft_general_content {
    cursor: pointer
}

body .x_fixed_tool .ft_cell_pop .ft_general_content :hover {
    color: #f25b20
}

body .x_fixed_tool .ft_cell_pop .triangle_inner {
    border-left-color: #232331
}

body .x_fixed_tool .ft_vcoin_item .tit {
    color: #999
}

body .x_fixed_tool .ft_vcoin_item .txt {
    color: rgba(230,233,240,.45)
}

body .x_fixed_tool .ft_general_content .txt {
    color: #999
}

body .x_modal_download:before {
    opacity: 0
}

.top-nav-wrap,.left-nav-wrap,.card-module-head,.video-card-module,.video-banner-module,.schedule-banner-module .list-entry-wrap-wrap,.filter-labels-wrap {
    opacity: 1;
    transition: opacity .3s
}

.large-focus.light-off {
    --light-off-opacity: .4
}

.large-focus.light-off .top-nav-wrap,.large-focus.light-off .left-nav-wrap,.large-focus.light-off .card-module-head,.large-focus.light-off .video-card-module,.large-focus.light-off .video-banner-module,.large-focus.light-off .schedule-banner-module .list-entry-wrap-wrap,.large-focus.light-off .filter-labels-wrap {
    opacity: var(--light-off-opacity);
    transition: opacity .3s
}

.live-room-class.light-off .top-nav-wrap,.live-room-class.light-off .left-nav-wrap,.live-room-class.light-off .live-card-flow-wrap {
    opacity: .4
}

#app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.gray-style-remembrance {
    filter: grayscale(90%) saturate(.2);
    -webkit-filter: grayscale(90%) saturate(.2)
}

html {
    background: rgb(20,20,20)
}

body {
    min-width: unset;
    font-family: numFont,PingFangSC-Regular,Tahoma,Microsoft Yahei,sans-serif,helvetica,Segoe UI
}

body body {
    background: rgb(20,20,20)
}

body img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution: .001dpcm) {
    body img[lazy=loading] {
        -webkit-clip-path:inset(1px);
        clip-path: inset(1px)
    }
}

#ssi-header {
    position: relative;
    z-index: 1100
}

#ssi-header .site_head {
    background: #0f0f1e
}

@media screen and (min-width: 2161px) {
    #ssi-user-bar .mod_quick {
        right:var(--side-margin-max)
    }
}

#ssi-footer {
    width: 100%;
    box-sizing: border-box;
    background: rgb(20,20,20)
}

#ssi-footer .site_footer {
    border-top: none
}

#ssi-footer .site_footer .mod_footer_contentinfo {
    display: flex;
    justify-content: center
}

#ssi-footer .site_footer .mod_footer_contentinfo .contentinfo_channel {
    display: none
}

#ssi-footer .site_footer .mod_footer_contentinfo .contentinfo_service {
    width: auto
}

#ssi-footer .mod_footer_contentinfo .contentinfo_feature {
    display: none
}

.is-show-footer #ssi-footer {
    display: block
}

.focus-wrap .txp-watermark {
    display: none
}

.focus-wrap video {
    -o-object-fit: cover!important;
    object-fit: cover!important;
    font-family: "object-fit: cover;"
}

.has-red-top-class {
    padding-top: var(--top-red-banner-height);
    padding-left: var(--top-red-banner-side-margin);
    padding-right: var(--top-red-banner-side-margin)
}

#ssi-footer {
    display: none
}

#ssi-footer .mod_footer_contentinfo .dl_list .item:hover,#ssi-footer .mod_footer_contentinfo .foot_link:hover {
    color: #00d1d1
}

.mod_footer a:hover {
    color: #00d1d1!important
}

.toast-wrap {
    position: fixed;
    top: 84px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    background-color: rgba(0,0,0,.9);
    mix-blend-mode: normal;
    border-radius: 30px;
    z-index: 119
}

.toast-wrap .toast-text {
    color: #fff;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px
}

:root {
    --C1: #fff;
    --C2: rgb(230, 233, 240);
    --C3: rgba(230, 233, 240,.45);
    --CBG: #0f0f1e;
    --WF: 24px;
    --page-padding-top: 24px;
    --page-padding-bottom: 24px;
    --comment-left-padding: 28px;
    --content-margin: 40px;
    --content-big-card-margin: 24px;
    --card-margin: 12px;
    --left-tab-width: 180px;
    --tab-content-gap: 30px;
    --header-height: 84px;
    --top-red-banner-height: 60px;
    --top-red-banner-side-margin: 20px;
    --card-sub-height: 32px;
    --right-arrow-width: 15px;
    --content-right-margin: 40px;
    --content-right-margin-active: calc(40px + (100vw - 1600px)/16);
    --content-right-margin-max: 60px;
    --content-left-margin-max: calc( var(--left-tab-width) + (100vw - var(--left-tab-width) - var(--card-module-width-2160px)) / 2 - var(--right-arrow-width) );
    --side-margin-max: calc( var(--content-left-margin-max) - var(--left-tab-width) - 2 * var(--right-arrow-width) );
    --card-module-width-0-1600px: calc(100vw - var(--left-tab-width) - var(--tab-content-gap) - var(--content-right-margin) - var(--right-arrow-width));
    --card-module-width-1600-1920px: calc(100vw - var(--left-tab-width) - var(--tab-content-gap) - var(--content-right-margin-active) - var(--right-arrow-width));
    --card-module-width-1920-2160px: calc(100vw - var(--left-tab-width) - var(--tab-content-gap) - var(--content-right-margin-max) - var(--right-arrow-width));
    --card-module-width-2160px: calc(599px * 3 + 2 * var(--content-big-card-margin) - var(--right-arrow-width));
    --card-width-height-proportion: 9 / 16;
    --vertical-card-width-height-proportion: 275 / 197
}

.b-empty-placeholder[data-v-8fa304e9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px
}

.b-empty-placeholder span[data-v-8fa304e9] {
    margin-top: 12px;
    font-size: 12px;
    line-height: 17px;
    color: #fff;
    opacity: .6
}
